HTML and CSS Reference
In-Depth Information
Figure 6-17. Two treatments of a background using the new background-clip and
background-origin properties as well as the space value in the background-repeat
Lastly, in backgrounds, the new background-size property can be used to stretch
a background over its background area instead of repeating it. This is a useful and
needed feature of backgrounds, but be careful your image doesn't get stretched or scaled
up too far, or it will begin looking fuzzy, pixelated, and downright awful. The property
takes one or two values. One value sets the horizontal and vertical size together, while
two values set these independently of each other. The width and height can be set with
a percentage, but this risks distorting the image when set for both dimensions of the im-
age. To address this, the keyword auto may be used for one dimension, so the image
maintains its aspect ratio. This is the default value for the height when only one value is
/* Set width to 100% of the available area and height to
50% of the image height */ background-size:100% 50%;
/* Set width to 100% and maintain the aspect ratio of the
image */
background-size:100% auto;
/* Set the width 50% and the height to auto */
Note The first setting in the previous code will distort the image.
The background-size property also has the keywords contain and cover . A
value of contain will scale the image to completely fit in the background area while
maintaining its aspect area, even if there is some whitespace on one side. The cover
value will scale the image while maintaining the aspect ratio as well, but it will scale the
image so that it completely covers the background area, even if this means some of the
image will be clipped out of view ( Figure 6-18 ).
Search WWH ::

Custom Search