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.
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