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");
}
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.