Change the background of a DIV element - Javascript CSS Style Property

Javascript examples for CSS Style Property:background

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. background

Introduction

Click button to change the background property of the DIV element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//w w w  . j  av  a  2s  . co  m
    width: 500px;
    height: 500px;
    background: coral url('http://java2s.com/resources/a.png') no-repeat fixed center;
    color: white
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <p>My DIV element</p>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.background = "url('http://java2s.com/resources/a.png') lightblue repeat-x center";
}
</script>

</body>
</html>

Related Tutorials