Monday, September 13, 2010

Web page backgrounds in CSS

Backgrounds are added to web page elements using a number of properties, as described
in the sections that follow.
background-color
This property sets the background color of the element. In the following example, the
page’s body background color has been set to #ffffff (which is hex for white):
body {
background-color: #ffffff;
}
background-image
This property sets a background image for the relevant element:
body {
background-image: url(background_image.jpg);
}
By using this CSS, you end up with a tiled background, as shown in the following image.

 

background-repeat
The properties explored so far mimic the range offered by deprecated HTML attributes,
but CSS provides you with control over the background’s tiling and positioning. The
background-repeat property can take four values, the default of which is repeat, creating
the tiled background just shown.If background-repeat is set to no-repeat, the image is shown just once, as in the following illust

 

If this property is set to repeat-x, the image tiles horizontally only.ration.

 



And if the property is set to repeat-y, the image tiles vertically only.

No comments:

Post a Comment