Background Controls
Each object on your web page has a background. The background is either transparent so that the background of the parent object shows or it can be defined specifically for the current object using these stylesheet attributes:
- background-color specifies the colour. This can be transparent (the default), a three or six character hec colour code, or a predefined colour keyword.
- background-image specifies an image to be used as the background. This can be none (the default) or the URL of an image to be used specified as url(image.gif).
- background-repeat specifies what to do if the background image doesn't fill the entire page. This can be repeat (the default), repeat-x, repeat-y, or no-repeat.
- background-attachment specifies whether the background image is to scroll with the page (the default) or be fixed within the window.
- background-position (for block tags only) specifies two values giving the position of the background image behind the object. The first value can be top (the default), center, or bottom. The second value can be left (the default), center, or right. Either or both values can also be specified as a length or percentage.
Alternatively all of the above can be included into one background attribute by specifying them in the order colour, image, repeat, attachment, position with each separated by spaces from the others. Not all attributes need be included.
Length can be specified in a number of different ways:
- em width of letter M in current font
- ex width of letter x in current font
- cm centimetres
- mm millimetres
- pc picas
- pt points
- in inches
- px pixels
Examples
.head {background-color:#fff;}
.body {background-image:url(mypic.gif); background-attachment:fixed;background-repeat:no-repeat;background-position: center center;}
.foot {background: #ffffff url(mypic.jpg) repeat-x center left;}
