design3
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
102<br />
The Principles of Beautiful Web Design<br />
background-image<br />
If we want an image to be used as the background of an element, we can specify that image using<br />
the background-image property. The possible values for this property are url('filename') or<br />
none. If we wanted to set the background of an element to animalcracker.png, we’d add the following<br />
declaration to that element’s style rule:<br />
background-image: url('animalcracker.png');<br />
background-repeat<br />
There are four possible values for background-repeat: repeat, repeat-x, repeat-y, and norepeat.<br />
The default value is repeat, which sees that the specified background image will be<br />
tiled vertically and horizontally. The repeat-x setting will cause the background image to be<br />
repeated horizontally. This is handy if you want to apply a horizontally tiling image or gradient<br />
to an element, but want the rest of that element to be filled with the specified background color.<br />
Similarly, repeat-y specifies that the background image should be repeated vertically. Finally,<br />
no-repeat is used when you have a background image that you don’t want to tile at all. The<br />
effect of each of these settings is shown in Figure 3.21.<br />
Figure 3.21. The effects of different background-repeat settings on animal crackers<br />
background-attachment<br />
This property determines whether the background image stays in the same location or moves<br />
with the content when the page is scrolled. It can be set to the values of fixed or scroll, the<br />
latter of which is the default. When background-attachment is set to fixed, the background<br />
will be fixed relative to the viewport (or browser window), so that when you scroll the page,<br />
the background image will stay in the same location.<br />
background-position<br />
This property controls the position of a background image and accepts two values: the horizontal<br />
and vertical position of the image. These values can be set using keywords (right, center, or<br />
top for the horizontal position; top, center, or bottom for the vertical), using CSS measurements,<br />
or using percentages. For example, if you wanted a background image to be centered horizontally<br />
and aligned to the top of an element, you could specify this using keywords (background-position:<br />
center top) or using percentages (background-position: 50% 0%). If we wanted to<br />
position the image 300 pixels from the left edge, and 400 pixels from the top, we could use the