totn CSS

CSS: background-image property

This CSS tutorial explains how to use the CSS property called background-image with syntax and examples.

Description

The CSS background-image property defines the background image for an element.

Syntax

The syntax for the background-image CSS property is:

background-image: value;

Parameters or Arguments

value

The background image for the element. It can be one of the following:

Value Description
url Location of the image resource
div { background-image: url("/images/logo.png"); }
none No text-decoration is applied to the text
div { background-image: none; }
inherit Element will inherit the background-image from its parent element
div { background-image: inherit; }

Note

Browser Compatibility

The CSS background-image property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the background-image property below, exploring examples of how to use this property in CSS.

div { background-image: url("/images/gradient.png"); }

In this CSS background-image example, we have set a background-image for the <div> tag to /images/gradient.png.

It is also wise when setting the background-image property to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of black.

div { background-color: black; 
      background-image: url("/images/gradient.png"); }

Now if the gradient.png image is not available, the <div> will still display a black background-color.

Share on: