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
Media: Visual
Computed value: As specified, but with URIs made absolute
Animatable: No
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.backgroundImage

Syntax

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

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

HTML

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

CSS

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

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 20th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu