Background-size

Another new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.

Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.

background-size: auto;
background-size: 275px 125px;

The code for this is relatively straightforward:

#example1 {
background-size: auto;
}

#example2 {
background-size: 275px 125px;
}

How it Works

The background-size property can be used to specify the size of background images in one of three ways. Designers can choose to either supply one or two lengths, percentages or auto keywords, or use the contain keyword, or the cover keyword.

Like the various other background properties, background-size can accept multiple values, specified using a comma-separated list, when working with multiple backgrounds, keep reading for more information.

The Syntax
background-size: <bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

Examples
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

Let’s first take a look at how lengths, percentages and the auto keyword work, before moving on to look at the contain and cover keywords.

Specifying the Background Size using Lengths, Percentages or ‘auto’

Specifying the background size using lengths and percentages does exactly what you’d expect. For each background image, two lengths or percentages can be supplied – the first relating to the width of the background image, the second relating to the height.

Note: when percentages are used, these relate to the width/height of the ‘background positioning area’ of the containing element (ie. the space available for the background), not the width/height of the background image itself.

The auto keyword can be used in place of either value, and if only one value (length/percentage/auto) is supplied for background-size, this will be treated as the width, and the height will be assumed to be auto.

Where one value is a defined length or percentage and the other value is auto, the background image will be scaled according to the specified length or percentage in such a manner that its intrisic proportions (ratio) are maintained.

If background-size is not specified, the default value is auto for both width and height. Where both values are auto, the image is shown at its original size.

Let’s take a look at a few examples to demonstrate this. The same background image is used in all of the examples below, it’s original dimensions are 550px width x 250px height. In all examples the background image has been defined so as not to repeat, and the following code is assumed in addition to that shown for each example:

#example {
width: 550px;
height: 250px;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: as defined in individual examples;
}

Example A

In our first example, background-size has been defined as ‘auto’ for both values, therefore the background image will be shown at it’s original dimensions; 550px (w) x 250px (h).

Example A

The code for this could be expressed in one of two ways:

background-size: auto auto;

or

background-size: auto;

Remember, where only one value is specified, the second is assumed to be ‘auto’.

Example B

For our second example, background-size is specified as 200px (w) and auto (h), therefore the background image will be shown at the following dimensions; 200px (w) x 91px (h), the width as specified and the height reduced proportionately to the width, so as to maintain the image’s original proportions/ratio.

Example B

Again, the code for this could be expressed in one of two ways:

background-size: 200px auto;

or

background-size: 200px;

Example C

For our third example, background-size is specified as auto (w) and 125px (h), therefore the background image will be shown at the following dimensions; 275px (w) x 125px (h), the height as specified and the width reduced proportionately to the height, so as to maintain the image’s original proportions/ratio.

Example C

Here’s the code:

background-size: auto 125px;

Example D

For our fourth example, background-size is specified as 200px (w) and 200px (h), therefore the background image will be shown, as defined, at the following dimensions; 200px (w) x 200px (h), even though this means the image’s original proportions/ratio will be lost.

Example D

Here’s the code:

background-size: 200px 200px;

Example E

Our next example uses percentages to define background-size, in this case specified as 50% (w) and auto (h), therefore the background image will be shown at the following dimensions; 275px (w) x 125px (h), the width of the image is equal to 50% of the containing element’s width (in this case 550px), and the height of the image is reduced proportionately to the width, so as to maintain the image’s original proportions/ratio.

Example E

As discussed earlier in this article, when the second value is auto, this could be expressed in one of two ways:

background-size: 50% auto;

or

background-size: 50%;

Remember, percentages relate to the width/height of the ‘background positioning area’ of the containing element (ie. the space available for the background), not the width/height of the background image itself.

Example F

This example again uses percentages to define background-size, this time auto (w) and 25% (h), therefore the background image will be shown at the following dimensions; 138px (w) x 63px (h), the height of the image is equal to 25% of the containing element’s height (in this case 275px), and the width of the image is reduced proportionately to the height, so as to maintain the image’s original proportions/ratio.

Example F

Here’s the code:

background-size: auto 25%;

Example G

For our final example we’re going to use both lengths and percentages to define background-size, in this case 80% (w) and 125px (h), therefore the background image will be shown at the following dimensions; 440px (w) x 125px (h), the width is equal to 80% of the containing element’s width (in this case 550px), and the height is 125px as defined.

Example G

Here’s the code:

background-size: 80% 125px;

Specifying the Background Size using ‘contain’ or ‘cover’

The two other possible values for background size are the keywords contain and cover.

If the contain keyword is used, the background image is scaled, while preserving the image’s original proportions / aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area, ie. neither the image’s width or height exceed the background positioning area. As such, depending on whether or not the proportions of the background image match those of the background positioning area, there may be some areas of the background which are not covered by the background image.

If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. both the images width or height are equal to or exceed the background positioning area. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area.

Let’s take a look at a few of examples, firstly using the contain keyword. The same background image has been used for each example, the image’s original dimensions are 550px (w) x 250px (h).

Example H

In this example, background-size has been set to contain. Although the original image is slightly larger than the containing element, and as such is reduced in size, the aspect ratios of the image and containing element match, meaning that the background image fits exactly in the background positioning area.

Example H

Here’s the code for this example:

#exampleh {
width: 495px;
height: 225px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}

Example I

In our second example, again background-size has been set to contain. Again the original image is slightly larger than the containing element and needs to be reduced in size, however this time the aspect ratios of the image and containing element don’t match, meaning that while the whole background image is contained within the background positioning area, there is empty space around the image.

Example I

Here’s the code for this example:

#examplei {
width: 580px;
height: 200px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}

Example J

Our third and final example using the contain keyword can be opened in a new window by following the link below. In this case the background image has been assigned to the body element, try re-sizing your browser window to see how the background image behaves.

Example J (Opens in a new browser window/tab)

Here’s the code for this example:

body {
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: contain;
}

Example K

Now let’s take a look now at some examples using the cover keyword.

In this example, background-size has been set to cover. As in example H above, although the original image is slightly larger than the containing element, and as such is reduced in size, the aspect ratios of the image and containing element match, meaning that the background image fits exactly in the background positioning area. In such circumstances, there is no difference in behaviour between the cover and contain keywords.

Example K

Here’s the code for this example:

#examplek {
width: 495px;
height: 225px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}

Example L

In this example, again background-size has been set to cover. As in example I above, the aspect ratios of the image and containing element don’t match, however as background-size has been set to cover, this time the entire background positioning area is covered by the background image and as such part of the image is lost.

Here’s the code for this example:

Example L
#examplel {
width: 580px;
height: 200px;
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}

Example M

As in example J above, our third and final example using the cover keyword can be opened in a new window by following the link below. Again the background image has been assigned to the body element, try re-sizing your browser window to see how the background image behaves.

Example M (Opens in a new browser window/tab)

Here’s the code for this example:

body {
background-image: url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}

Defining the Background Size of Multiple Background Images

The background-size property, like the various other background properties, can accept multiple values for background size, specified using a comma-separated list, when working with multiple backgrounds (see our guide to muliple backgrounds for more information).

Let’s take a look at a quick example. The element below has three background images specified, with differing values for background-size for each image.

Example N

Here’s the code for this example:

#examplen {
width: 580px;
height: 200px;
background-image: url(img/sheep.png), url(img/sheep.png), url(img/betweengrassandsky.png);
background-repeat: no-repeat;
background-position: 20px 100px, 400px 50px, center bottom;
background-color: #EEE;
background-size: 70px, auto, cover;
}

Browser Support

Browser support for background-size has grown of late, with the current versions of most popular browsers now supporting the property, including Firefox, Safari, Chrome, Internet Explorer and Opera.

Firefox (Gecko)

Mozilla Firefox 4.0+ (Gecko 2.0+) offers full support for the background-size property.

Prior to version 4.0, -moz-background-size was supported from Firefox 3.6 (Gecko 1.9.2), however this is no longer support from 4.0 onward.

Internet Explorer

Microsoft Internet Explorer 9.0+ offers full support for the background-size property.

Prior to version 9.0, Internet Explorer offered no support for background-size.

Opera

Opera 10.0+ offers full support for the background-size property.

Prior to version 10.0, -o-background-size was supported in Opera 9.5, however there were some descrepancies between Opera’s implementation and the CSS3 specification.

Safari / Chrome (Webkit)

Safari 4.1+ (webkit 532) and Chrome 3.0+ both offer full support for the background-size property.

Prior to these versions, Safari 3.0+ (webkit 522) and Chrome 1.0+ both supported -webkit-background-size, however this followed an earlier version of the specification (without support for the contain and cover keywords).

Additional Notes and Further Reading

The specification makes the following statement as to how the background-size property interactives with the background-repeat property:

If ‘background-repeat’ is ‘round’ for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area.

If ‘background-repeat’ is ‘round’ for one dimension only and if ‘background-size’ is ‘auto’ for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.

Further reading on the background-size property may be found in section 3.9 of the CSS3 Backgrounds and Borders specification here.


OUR SPONSORS

Advertise here?
TAG CLOUD