🚨 $100K in Sight: Follow Bitcoin’s Final Push Live! TRACK NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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