CSS background-image Property

Description

The background-image property sets the background image for an item. If the background color is set for an element at the same time, it will be shown until the background image is fully loaded. The same will happen if the images are not available or their display in the browser is disabled. If there are transparent areas in the picture, the background color will look through them. It is permissible to specify several background images, listing their parameters separated by commas.

Initial value

none

Applies to

All elements

Inherited

No

Computed value

As specified, but with URIs made absolute

Animatable

No

JavaScript syntax

object.style.backgroundImage

Interactive Demo

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

background-image: url("images/sun.png"),
                  url("images/tick.png");

background-image: url("images/tick.png"),
                  url("images/sun.png");

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("images/sun.png");

Syntax

background-image: <bg-image> [ , <bg-image> ]* 

Values

• <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

<p>Example of the background-image css property</p>

body { 
   background-image: url(images/icon1.png); 
   background-color: #c7b39b; 
}
p {
   padding: 10px;
   background: white;
   color: black;
}

Browser Support

The following table will show you the current browser support for the CSS background-image property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	14	1	1	37

Last updated by CSSPortal on: 1st January 2024