It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Background-Size Property

Reading time 1 min
Published Aug 10, 2017
Updated Oct 10, 2019

Explaining background-size

Using the background-size property, you can define a custom CSS background image size:

Example
div { 
  background: url(https://github.com/bitdegree/banners/blob/master/learn/pom-laptop.png?raw=true);
  background-size: 60px 90px;
}

The CSS background-size syntax

To use the CSS background-size property, follow the syntax example below:

background-size: value;

Example
div {
  background: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true);
  background-size: 30%;
}

You will find all the available values explained in the following section.

Property values

Value Description Example
auto The default value. The image is scaled, keeping the aspect ratio. background-size: auto;
cover The image covers the container fully, but might be stretched or cropped. background-size: cover;
contain The container fits all the image inside it, but some areas might be left uncovered. background-size: contain;
Length units Two values define the width and height, respectively. If you only define one, it stands for width, and the height is auto by default. background-size: 700px 500px;
Percentages Two values define the width and height in relation with the original CSS background image size. If you only define one, value it stands for width, and the height is auto by default. background-size: 30%;

Note: if you separate the values by commas, you can define the CSS background image size for multiple backgrounds.

Browser support

Browser image
Chrome
3+
Browser image
Edge
12+
Browser image
Firefox
4+
Browser image
IE
9+
Browser image
Opera
10+
Browser image
Safari
4.1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
10.1+
Browser image
Safari
All