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
Thebackground-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](https://blogs.sitepointstatic.com/images/tech/686-background-size-contain.png)
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](https://blogs.sitepointstatic.com/images/tech/686-background-size-cover.png)
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 supportbackground-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 img
s 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.
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.
Frequently Asked Questions (FAQs) about CSS3 Background Size Property
What is the CSS3 background-size property and how does it work?
The CSS3 background-size property is a powerful tool that allows you to control the size of a background image in a web page. It can be used to stretch, shrink, or tile an image to fit a specific area. The property accepts two values, representing the width and height of the image respectively. These values can be specified in pixels, percentages, or as ‘auto’ to maintain the image’s original proportions.
How can I use the ‘cover’ and ‘contain’ values in the background-size property?
The ‘cover’ and ‘contain’ values are special keywords in the CSS3 background-size property. ‘Cover’ scales the background image to be as large as possible so that the background area is completely covered by the image. Some parts of the image may not be in view within the background positioning area. On the other hand, ‘contain’ scales the image to the largest size such that both its width and height can fit inside the content area.
Can I use the background-size property with multiple background images?
Yes, the CSS3 background-size property can be used with multiple background images. You can specify a different size for each image by separating the sizes with commas. The sizes are applied to the images in the order they are listed in the background-image property.
How can I make a background image responsive using the background-size property?
To make a background image responsive, you can use the ‘auto’ value or a percentage value in the background-size property. This will scale the image relative to the size of the element it’s applied to, making it adjust automatically to different screen sizes.
Why isn’t my background image resizing even after using the background-size property?
If your background image isn’t resizing, it could be due to a few reasons. First, check if the path to your image is correct. Second, ensure that the element you’re applying the background image to has a defined width and height. Lastly, check if there are any other CSS rules overriding your background-size property.
Can I use the background-size property in all browsers?
The CSS3 background-size property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s not supported in Internet Explorer 8 and earlier versions.
How can I use the background-size property to create a full-screen background image?
To create a full-screen background image, you can use the ‘cover’ value in the background-size property. This will scale the image to cover the entire viewport, regardless of its original size.
Can I use the background-size property with gradient backgrounds?
Yes, the CSS3 background-size property can be used with gradient backgrounds. It will scale the gradient to fit the size specified, creating a repeating pattern if the size is smaller than the element’s size.
How can I use the background-size property to create a parallax effect?
To create a parallax effect, you can use a combination of the background-size and background-attachment properties. By setting the background-size to ‘cover’ and the background-attachment to ‘fixed’, the background image will scale to cover the entire viewport and remain fixed while the content scrolls over it.
Can I animate the background-size property?
Yes, the CSS3 background-size property can be animated using CSS animations or transitions. This can be used to create interesting effects, such as a zooming or panning effect on the background image.
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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.