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
Formal syntax: <bg-image> [ , <bg-image> ]* 

background-image: none;
background-image: url("images/img.png");
<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
.class {
   background-image: url(img/myimage.jpg);
}

Click the button below to experiment with this property.

Give it a Try!

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.