In CSS2.1, background images applied to a container retained their fixed dimensions. Fortunately, CSS3 introduces the
background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques.
There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.
Length measurements can be applied using:
background-size: width height;
By default, the width and height are set to
auto which retains the original image dimensions.
We can resize an image to a new size using absolute measurements such as px, em, cm, etc. The aspect ratio will be changed if necessary so, if our background image is 200×200 pixels, the following code keeps that height but halves the width:
background-size: 100px 200px;
If only one length is defined, it is assumed to be the width. The height is set to
auto and the image will keep its aspect ratio, i.e.
background-size: 100px; /* is identical to */ background-size: 100px auto;
This code will scale our 200×200 image to 100×100 pixels.
Relative Resizing Using Percentages
If a percentage is used, the dimension is based on the containing element — NOT the size of the image, e.g.
background-size: 50% auto;
The width of the background image therefore depends on the size of its container. If our container width is 500px, our image is resized to 250×250.
Using a percentage can be useful for responsive designs. Resize the demonstration page to discover how the dimensions change.
Scaling to the Maximum Size
background-size property also accepts a
contain keyword. This scales image so it fits the container. In other words, the image will grow or shrink proportionally but the width and height will not exceed the container’s dimensions:
Filling the Background
background-size also accepts the
cover keyword. The image is scaled to fit the entire container but, if that has a different aspect ratio, the image will be cropped:
Sizing Multiple Backgrounds
Multiple backgrounds can be resized using a comma-separated list of values which apply in the same order, e.g.
background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;
The latest versions of all browsers support
background-size without a prefix.
IE8 and below do not support the property. You could use an IE filter to emulate contain and cover but it’s not possible to resize background images without resorting to tricks such using real
imgs behind other elements. It’s messy; I recommend graceful degradation.
The W3C CSS Backgrounds and Borders Module Level 3 Specification states
background-size can be defined after
background-position in shorthand
background notation. None of the browsers support this option so, for now,
background-size must be defined as a separate property.
If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Learn CSS3.