HTML and CSS Reference
Figure 5-22 The newsletter icon in relation to the newsletter box with a background-origin of content-box applied to it.
Initial value: auto | Inherited: No | Applies to: All | CSS3
Unprefixed browser support: IE 9+Prefixed browser support: Firefox 3.6+, Chrome 1+, Opera 9.5+, Safari 3+
The background-size property was introduced in CSS Level 3, which allows you to change the
size of a background image. As with background-position , you can use all value types, percentages, pixels,
ems, and so on. Percentages are relative to the background positioning area, a concept explained in the descriptions
for the previous properties.
background-size: 50% 100%;
In this example, two values are specified: one for the width, one for the height. A background image with this declar-
ation is 50% the width of the element to which it is applied and 100% its height.
If you use the declaration background-size: 50%, the second value is assumed to be auto . When auto is
used, the browser calculates the height based on the specified width to maintain the image's aspect ratio.
You can also use two keyword values: cover and contain .
background-size: contain scales a background image to fit inside the background positioning area, making
it as large as possible while respecting the image's aspect ratio.
background-size: cover scales a background image to the smallest size so that both the image's height and
width cover the background positioning area while respecting the image's aspect ratio.
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+