HTML and CSS Reference
In-Depth Information
The cover keyword tells browsers to scale the image in order to cover all of the back-
ground while still retaining the proportions of the image, even if that means cropping
the image. The contain keyword, on the other hand, tells browsers to scale the image
so that all of the image is completely contained within the element, even if that means
that not all of the element is covered by the image. Figure 4-7 provides examples of a
background image scaled to a specifi c size, and scaled using the cover and contain
Figure 4-7
background-size property
background-size: 300px 200px;
background-size: cover;
background-size: contain;
the image is displayed at a
specific size
the image is scaled until it
covers the entire element, but
part of the image is cropped
the image is scaled so that the
entire image is contained
within the element, but part of
the element remains uncovered
Vaclav Volrab/
Thus, to create a background image that is half the width and height of the containing
element, centered vertically and horizontally, and not tiled, you could apply the follow-
ing styles:
If you include only
one value in the
property, the browser
uses it to set the image
width and sets the height
background-position: center center;
background-repeat: no-repeat;
background-size: 50% 50%;
In the box model discussed earlier, every element contains a content box, a padding
box, and a border box. You can defi ne the extent of a background image or color using
the style
background-clip: box ;
where box is content-box , padding-box , or border-box (the default). As shown in
Figure 4-8, the keyword you choose controls whether the background image or color is
clipped at the edge of the content or the edge of the padding, or runs all the way to the
edge of the element border.
Search WWH ::

Custom Search