CSS and Backgrounds


css CSS and Backgrounds Css Backgrounds Background Css

CSS and Backgrounds

CSS can be used to apply background colors and background images to different parts of a web page.

Background Colors

CSS provides the facility to apply background color or image to a single word. The property used for this purpose is background-color.

Example <html> <head> <style type="text/css"> div { background-color: violet; } p{ background-color: yellow;} </style> </head> <body> <div> This 'div' has a violet background color applied. </div> <p>This paragraph has a yellow background color applied.</p> </body> </html>

Background Images

CSS also provides the facility to add an image as background to any part of the page. The property used for this purpose is background-image.

Example<html> <head> <style type="text/css"> body{ background-image: url("leaf.png"); } </style> </head> <body> Image is applied as Background in "body" TAG. </body> </html>

Background Control

The style of displaying the background image can easily controlled in CSS. Different options for controlling background image are as follows:

Background Repetition

The repetition of image in the background can be controlled by using background-repeat property.

Example <html> <head> <style type="text/css"> body{ background-image: url("leaf.png"); background-repeat:no-repeat; } </style> </head> <body> Image is applied as Background in "body" TAG. </body> </html>

The above example will display the image once in the top-left of the paragraph.

The possible values are as follows. &bull: repeat-x:repeats the image horizontally for one row &bull:repeat-y:repeats the image vertically for one column.

Example<html> <head> <style type="text/css"> body{ background-image: url("leaf.png");background-repeat :repeat-y;} p{color: blue; background-image: url(flower.png);background-repeat:-x; padding: 45px; } </style> </head> <body> <h1>CSS and Backgrounds</h1> <b><p>paragraph background.....repeat-x:repeats the image horizontally for one row as shown in front of you.......</p></b> repeat-y:repeats the image vertically for one column as shown in front of you....... </body> </html>

Background Attachment

Normally the background image moves when the user scrolls up or down the page Background Attachment property is used to specify the background attachment.

Example <html> <head> <style> body { background-image: url("flower.png"); background-repeat: no-repeat; background-attachment: fixed; } .paragraph{color:navy;} </style> </head> <body> <h3>Normally the background image moves when the user scrolls up or down the page but in this case: Background Attachment property is used to fixed the background image.</h3> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> <p>Scroll down this page and see this effect</p> </body> </html>

The other value for this property is scroll that restores the default option.

Background position

The possible values are top,center,bottom,left and right.

<html> <head> <style type="text/css"> body{background-image: url("flower.png"); background-position:right bottom;} </style> </head> <body> <h1>CSS and Backgrounds</h1> <b><p>paragraph background.....</p></b> </body> </html>

You can also specify horizontal and vertical starting points in background-position:

Example<html> <head> <style type="text/css"> body{background-image: url("leaf.png"); background-position:60px 20px; background-repeat:no-repeat;} </style> </head> <body> <h1>CSS and Backgrounds</h1> <b><p>You can also specify horizontal and vertical starting points in background-position</p></b> </body> </html>

Shorthand property

You can use the background property to set all the background properties at once.

Example <html> <head> <style type="text/css"> body{background:#7CB9E8 url("leaf.png") no-repeat right bottom;} </style> </head> <body> <h1>CSS and Backgrounds</h1> <b><p>You can use the background property to set all the properties at once</p></b> </body> </html>

The order of the Shorthand property values for Background is:

&bull:background-color. &bull:background-image. &bull:background-repeat. &bull:background-attachment. &bull:background-position.
css Css Backgrounds Background Css Chapter Next »