CSS background-image Property

Description

The background-image property sets the background image(s) of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one.

  • Initial valuenone
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified, but with URIs made absolute
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.backgroundImage

Syntax

Formal syntax: <bg-image> [ , <bg-image> ]* 

background-image: none;
background-image: url("images/img.png");

Values

<bg-image> = <image> | none
  • <image>Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
  • noneColor of the next parent through which the background is visible.
  • inherit

Example

.class {
   background-image: url(img/myimage.jpg);
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

1+Firefox6+Explorer1+Chrome1+Safari8+Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.