HTML and CSS Reference
In-Depth Information
If you specify two values, the first one applies to horizontal axis and the second one to the vertical axis. For
example, the values for
background-repeat
in bg_repeat_2vals.html have been amended like this:
#space {
background-repeat: space
repeat;
}
#round {
background-repeat: round
repeat;
}
Figure
8-8
shows the result in IE 9. In the
<div>
on the left, the horizontal images are spaced out, but the
vertical ones are not. Also, the images in the final row are cut off. In the
<div>
on the right, the horizontal rows are
not cut of, but the bottom of the final row is.
Figure 8-8.
Specifying two values to the background-repeat property affects each axis differently
■
At the time of this writing, only iE 9+ and opera 10.5+ support
space
and
round
. Firefox and earlier
versions of iE treat both single and double values as
repeat
. Webkit-based browsers, such as Chrome and safari,
accept double values, but treat
space
and
round
as
no-repeat
.
Note
Controlling Background Images During Scrolling
he
background-attachment
property controls what happens to background images when the page or element is
scrolled. It accepts the following values:
scroll
This is the default value. The background is fixed with regard to the element, so
it scrolls with the page.
fixed
The background is fixed in relation to the browser viewport, so it remains in the
same position when the page is scrolled. Not supported by IE 6.
