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.

	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.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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;

  • Digital Experts Pakistan

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

  • 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


  • 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

      • 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 :)

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.