W3Schools.com

Style backgroundImage Property

Style Object Reference Style Object

Definition and Usage

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

Syntax

Set the backgroundImage property:

Object.style.backgroundImage="url('URL')|none|inherit"

Return the backgroundImage property:

Object.style.backgroundImage

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The backgroundImage property is supported in all major browsers.

Tips and Notes

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

Example

Example

Set a background image:

<html>
<head>
<script type="text/javascript">
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>

Try it yourself »

Style Object Reference Style Object
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE