🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

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.

DataCamp
Pros
  • 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
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • 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

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