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:
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:
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.
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
- 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
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free 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
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)