CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 261

in a different directory from the images. The ../ moves up one directory before going
into the images directory.
Note The quotes around the image's file path are optional if there are no spaces in
the filename or file path. If there are spaces, however, quotes around the file path are
required.
The background-repeat property determines how a background image (if
present) is repeated, if it is repeated. The basic settings are repeat , no-repeat ,
repeat-x , and repeat-y . These determine, respectively, whether the image is tiled,
not tiled (shown only once), tiled horizontally, or tiled vertically. Two new values have
been added to this property in CSS3: space and round . Normally when an image is
repeated, it will repeat as needed to fill the available space with some portion of the im-
age, even if that means some of the image will be clipped out of view. The space and
round properties prevent this clipping from happening. A value of space will fill the
available space with the image—without clipping the image—and will then add space
between the repeated images as necessary to evenly fill the available area. A value of
round works essentially the same way, but instead of filling the excess area with empty
space, the image is scaled up to fill the available area. Use the round value with cau-
tion, because an image will rapidly degrade in quality as it is scaled up, becoming fuzzy
and pixelated. Not good!
Note The space and round values of the background-repeat property cur-
rently have limited browser support. As of the time of writing, Opera is the only major
browser that supports them both. This is a good point to mention that Modernizr ( ht-
tp://modernizr.com ) , the HTML5 detection library mentioned in Chapter 1 , also
has detection capabilities for CSS3!
The background-attachment property determines whether a background im-
age or images are scrolled with the content when the page is scrolled. The value fixed
fixes a background in place, even if the page scrolls, while scroll allows it to scroll
away with the contents. Also, a new value, local , has been added. This value applies
only to elements that have their own scrollbar on the page. 10 If this value is set, when
the user scrolls the inset scrollbar, the background in that area of the screen will scroll
with it.
Note For a demonstration of the different values of background-attachment ,
visit http://people.opera.com/pepelsbey/experiments/bga .