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.
Absolute Resizing
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
The 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:
background-size: contain;
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:
background-size: cover;
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;
Browser Compatibility
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.
Shorthand Notation
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.
View the CSS3 background-size demonstration page…
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.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
