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 value
none
Applies to
All elements
Inherited
No
Media
Visual
Computed value
As specified, but with URIs made absolute
Animatable
No
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.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

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes1Yes