Javascript DOM CSS Style background Property

Introduction

Style the background of a document: 

document.body.style.background = "#f3f3f3 url('background1.png') no-repeat right top";

View in separate window 

<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>

<button onclick="myFunction()">Set background</button>

<script>
function myFunction() {/* w  w w .jav a2s  .c  o  m*/
  document.body.style.background = "#f3f3f3 url('background1.png') no-repeat right top";
}
</script>

</body>
</html>

The background property sets or gets up to eight separate background properties, in a shorthand form.

With this property, you can set/get one or more of the following (in any order):

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-origin
  • background-clip

The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.

Property Values

Value Description
color Sets the background color of an element
image Sets the background image for an element
repeat Sets how a background image will be repeated
attachment Sets whether a background image is fixed or scrolls with the page
position Sets the starting position of a background image
size Sets the size of a background image
origin Sets the background positioning area
clip Sets the painting area of a background image
initialSets this property to its default value.
inheritInherits this property from its parent element.

The background property default Value: 

transparent none repeat scroll 0% 0% auto padding-box border-box

The background property returns a string representing the background of an element.




PreviousNext

Related