The Not Too Distant Future of CSS - The CSS - page 238

As an alternative to the paired values shown earlier, the singular
keywords contain and cover describe explicit behaviors for how the
background may fill the available space.
■ contain : The background image is sized as large as it can be so that it
is completely contained within the available space; if the aspect ratio
of the image is different from the background area, then one side will
be 100 percent, and another will be smaller than the available length.
■ cover : The background image is sized so that it scales up (or down) to
completely fill the background area; if the aspect ratio of the image is
different from the background area, then one side will be 100 percent,
and another will be larger than the available length and appear cropped.

Figure 14.4 displays the background-size property when set using these
keywords.

div.one {
background: url(images/background_sizing_tile.png)

➥ no-repeat top left;

}
div.two {
background: url(images/background_sizing_tile.png)

➥ no-repeat top left;

/* for Firefox */
-moz-background-size: cover;
/* for Safari and Chrome */
-webkit-background-size: cover;
/* for Opera */
-o-background-size: cover;
/* W3C specs */
background-size: cover;

}