background Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:background


The background property sets or gets up to eight background properties:

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

Property Values

Value Description
color Sets the background color
image Sets the background image
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 for a background image
initialSets this property to its default value.
inheritInherits this property from its parent element.

Technical Details

Item Value
Default Value: transparent none repeat scroll 0% 0% auto padding-box border-box
Return Value: A String, representing the background of an element
CSS VersionCSS1 + new properties in CSS3


Style the background of a document:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
#myDIV {//from  w w w . j a v a2  s .  c  o  m
    border: 1px solid black;
    width: 300px;
    height: 300px;
    background: url('') no-repeat;

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

<div id="myDIV">

function myFunction() {
    document.getElementById("myDIV").style.backgroundSize = "60px 120px";


Related Tutorials