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;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;auto and the image will keep its aspect ratio, i.e.
background-size: 100px;
/* is identical to */
background-size: 100px auto;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;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;
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 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 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.
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 BucklerCraig 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.
