It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Background-Image Property

Reading time 1 min
Published Aug 10, 2017
Updated Oct 10, 2019

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

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
3.5+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All