How to Resize Background Images with CSS3

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…

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.