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.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
46
If background-repeat is set to no-repeat, the image is shown just once, as in the following
illustration.
If this property is set to repeat-x, the image tiles horizontally only.
And if the property is set to repeat-y, the image tiles vertically only.
background-attachment
This property has two possible values: scroll and fixed. The default is scroll, in which
the background works as normal, scrolling with the rest of the page. If you set the value to
fixed, the background image remains stationary while the remainder of the page scrolls.
WEB PAGE ESSENTIALS
47
2
background-position
This property??™s values set the origin of the background by using two values that relate to
the horizontal and vertical position.
Pages:
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111