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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 19/01/2021
3176 People Used
Only 97 Left
Rating
5.0