Javascript DOM CSS Style backgroundImage Property

Introduction

Set a background image for a document: 

document.body.style.backgroundImage = "url('background1.png')";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<h1>Hello World!</h1>
<button type="button" onclick="myFunction()">Set background image</button>

<script>
function myFunction() {//from  w w  w. j  ava 2  s  . com
  document.body.style.backgroundColor = "#f3f3f3";
  document.body.style.backgroundImage = "url('background1.png')";
}
</script>

</body>
</html>

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

The background-color will be used if the image is unavailable.

Property Values

Value Description
url('URL') The location of the image file
none No background image. Default.
initialSets this property to its default value.
inheritInherits this property from its parent element.

The backgroundImage property returns a String representing the background image.




PreviousNext

Related