document.body.style.background

Unleashing The Strength of document.body.style.background

by 
function setBackgroundColor(color) {
  document.body.style.background = color;
}

setBackgroundColor('red');

The ‘document.body.style.background’ property is used to set the background color of the document in HTML. The above code snippet shows you the use of the ‘document.body.style.background’ property. This is JavaScript syntax to change the background color of the HTML document.

Let’s take a look with example:

Step 1 – Create blank HTML document

<html>
  <head>
    <title>How to change document background color!</title>
  </head>
  <body></body>
</html>

In the above code example you will see I have written a blank HTML document. Now let’s render it into our web browser.

document.body.style.background

In the above image you will see a blank page but one change with the title of the tab. Which I have highlighted with the red rectangle. Now let’s write our JavaScript code to see the use of the ‘document.body.style.background’ property.

Step 2 – Use document.body.style.background property in JavaScript

<html>
  <head>
    <title>How to change the document background color!</title>
  </head>
  <body>
    <script>
    
      function setBackgroundColor(color) {
        document.body.style.background = color;
      }
      
      setBackgroundColor("red");
      
    </script>
  </body>
</html>

In the above code you can see I have used the 'document.body.style.background' property. Now let’s explain line by line to understand what is happening.

  1. On line #6 You can see I have written the opening tag of <script> to write the JavaScript code.
  2. on line #8 You can see I have declared the signature of the function 'setBackgroundColor(color)'.
  3. in the function body on line #9 I have used the 'document.body.style.background' property and given the value 'color' to it.
  4. And on line #12 I have called the function 'setBackgroundColor("red")' by passing the value "red", which is our color value which we want to apply as the background of our document.

And finally on line #14, I have closed writing JavaScript by adding the '</script>' tag. Which is a JavaScript ending tag.

Now let’s render our above code in our web browser to see the changes that we made.

document.body.style.background

In the above screenshot you can check out how our background color is applied.

Congratulations, you have learned how to use the 'document.body.style.background' property using JavaScript.