Easy Tutorial
❮ Prop Week Readonly Met Console Groupcollapsed ❯

backgroundImage Property


Definition and Usage

The backgroundImage property sets or returns the background image of an element.

Syntax

Set the backgroundImage property:

Return the backgroundImage property:

Value Description
url('URL') The location of the image file.
none Default. No background image.
inherit The background-image property is inherited from the parent element.

Browser Support

All major browsers support the backgroundImage property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Tips and Notes

Tip: In addition to the background image, you should also specify a background color. If the image is unavailable, the background color will be used.


Example

Set the background image:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.body.style.backgroundColor="#f3f3f3";
    document.body.style.backgroundImage="url('img_tree.png')";
}
</script>
</head>
<body>

<h1>Hello World!</h1>
<br>
<button type="button" onclick="displayResult()">Set Background Image</button>

</body>
</html>

❮ Prop Week Readonly Met Console Groupcollapsed ❯