CSS background-image Property

CSS background-image property sets one or more background images for an element. Default background-image is placed at the top left side of an element, and background-image is repeated both vertically and horizontally side.

The background images are allow to create a gradient layer on base context.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.backgroundImage = "url(article.jpg)"

Syntax

Here is a syntax for the CSS background-image property

background-image: url | none | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
url Specifies the URL of the image
none Default. No background image will be set on element
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets background image, multiple background image, gradient values.

.img {
  background-image: url("../../images/transparent_bird.png");
}
.mutli_img {
  background-image: url("../../images/transparent_star.png"), url("../../images/transparent_bird.png");
}
.gradient {
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("../../images/transparent_bird.png");
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Note: Internet Explorer 8 and earlier versions do not support the multiple background images on element.