HTML and CSS Reference
In-Depth Information
Figure 5-22
The newsletter icon in relation to the newsletter box with a background-origin of content-box applied to it.
background-size
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.
background (Shorthand)
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
