HTML and CSS Reference
In-Depth Information
■
auto
: Scales the side of the image so that the inherent aspect ratio of
the image is maintained; if both values are auto, the image appears at
its normal size (default).
■
<percentage>
: Scales the size of the background image to a percent-
age of the element's (not image's) background area in the specified
direction.
■
<length>
: Scales the side of the background image to the specified
length.
Figure 14.3
demonstrates the
background-size
property when these
<percentage>
and
<length>
values are used for sizing.
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 3.6 */
-moz-background-size: 100% 50px;
/* for Safari and Chrome */
-webkit-background-size: 100% 50px;
/* for Opera */
-o-background-size: 100% 50px;
/* W3C specs */
background-size: 100% 50px;
}
div.three {
background: url(images/background_sizing_tile.png)
➥
no-repeat top left;
