HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python 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.
Pros Main Features
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Pros Main Features
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- 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
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
