HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
How to add a background image in CSS
The CSS background-image property allows you to specify an image to be used as the background of the element:
Example
body {
background-image: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true);
}You can define multiple background images as well. Separate the sources using commas. The images will be layered, and the top layer will use the source which is defined first:
Example
body {
background-image: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true),
url(https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true);
}Note: it's recommended to also define a background-color. It will be used as a fallback and displayed if the image cannot load.
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
The syntax for background-image in CSS
To see how to add a background image in CSS, review the example below:
background-image: value;
The available values are listed in the table below:
| Value | Description | Example |
|---|---|---|
| none | No image (the default value) | |
| URL | Defining a source for an image | url(image.jpg); |
| linear-gradient | A linear gradient from one color at the top to another at the bottom | linear-gradient (yellow, green) |
| radial-gradient | A radial gradient from one color at the center to another at the edges | linear-gradient (yellow, green) |
Note: screen-readers don't react to background images.
Browser support
Chrome
1+
Edge
12+
Firefox
1+
IE
4+
Opera
3.5+
Safari
1+
Mobile browser support
Chrome
18+
Firefox
4+
Opera
All
Safari
All
