CHAPTER 45. ADVANCED EYE CANDY 332
The default is to scroll:
background-attachment: scroll;
45.2 Stretch The Background Image
Say you have a background image, but it is either too big or too small. You
do not want it repeating. You just want it to take the full space available.
The first number is width. The second number is height (length).
background-size: 100% auto;
If you are willing to have the aspect ratio go a bit crazy, you can do this:
background-size: 100% 100%;
There are a couple of special options for background size.
Cover:This scales the background image to be as large as possible without
repeating. Some parts of the image will probably not be visible, depending
on the shape of the image and the shape of the screen.
background-size: cover;
Contain: This scales the background image to be completely visible, but
may involve some repeating, depending on the shape of the image and the
shape of the screen.
background-size: contain;
45.3 Scroll Bar
If you are stretching the image to 100%, on pages with a scroll bar it will
always look the same, and on pages without a scroll bar it will always look
the same, but when you go from one to another, the image will change
slightly.
overflow: scroll;
You can avoid this by usingoverflow: scrollto force the scroll bar to
always be present.