CSS background-image property

The background-image property sets the element's background image.

By default, the image repeats vertically and horizontally.

This property can also specify a color gradient.

Example

#

An element with a background-image.

<style>
  .bg-image {
    background-image: url("/img/css/sunflowers.jpg");
    height: 200px;
  }
</style>

<div class="bg-image"></div>

Multiple images

The background can also be defined by multiple images which are then stacked on top of each other. With transparent images interesting effects can be obtained.

<style>
  .bg-image-multiple {
    background-image: url("/img/css/vangogh.jpg"), 
                      url("/img/css/church-at-auvers.jpg");
    background-repeat: no-repeat;
    height: 350px;
  }
</style>

<div class="bg-image-multiple"></div>

Syntax

background-image: url(url) | none | linear-gradient() | radial-gradient() |
                  repeating-linear-gradient() | repeating-radial-gradient() |
                  inherit;

Values

#

Value Description
url Image URL or file path. When using multiple images, separate URLs with a comma
none Default. No background will be used
linear-gradient() Sets linear gradient with at least two colors (top to bottom)
radial-gradient() Sets radial gradient with at least two colors (center to edges)
repeating-linear-gradient() Repeats linear gradient
repeating-radial-gradient() Repeats radial gradient
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-image values.

<style>
  .bg-example {
    background-image: linear-gradient(orangered, purple);
    height: 200px;
  }
</style>

<div class="bg-example"></div>

Browser support

This table shows when background-image support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides