background Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:background

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

Description

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

Example

Style the background of a document:

Demo Code

ResultView the demo in separate window 

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

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

<div id="myDIV">
  <h1>Hello</h1>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.backgroundSize = "60px 120px";
}
</script>

</body>
</html>

Related Tutorials