How to Resize Background Images with CSS3

Contributing Editor

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;

contain background size

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;

cover background size

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.berivals.com/ Michal Smith

    Thanks for sharing your knowledge with us.

    This is the great help for me as i`m a fresher in web designing.

  • Bharat

    What about this. i think this is cheaper and better then this, didn’t i ?
    img {
    max-width: 100%;
    height: auto;
    }

  • http://digitalexperts.net Digital Experts Pakistan

    Much needed feature, How long need to wait to use it

  • http://www.alfystudio.com Ahmad Alfy

    Great to know where to use it on the shorthand format. Wish it was working because I hate to declare it manually everytime

    Thanks

  • Terry Price

    There are images missing on this article. also would have been good for me to see this syntax in context to a page layout or at the very least a div set up.

  • kris

    @Craig Buckler,

    What you tell when someone tell you It’s not worked in IE.

    • kris

      I means Ie8

      • http://www.optimalworks.net/ Craig Buckler

        Tell them their browser doesn’t support HTML5. IE8 is three years old and was not on par with other browsers when it was released. You cannot expect it to do the same things as Chrome 19, Firefox 13 or Opera 12 which were all released within the last month.

  • Vengatesh TR

    Thanks :)