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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0