Contents
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
Chrome
3+
Edge
12+
Firefox
4+
IE
9+
Opera
10+
Safari
4.1+
Mobile browser support
Chrome
18+
Firefox
4+
Opera
10.1+
Safari
All