Javascript Reference - HTML DOM Style background Property

The background property sets or gets eight separate background properties, which is listed below, in a shorthand form.

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

Browser Support


`background`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the background property:

var v = object.style.background

Set the background property:

object.style.background=color image repeat attachment position size origin clip|initial|inherit

Property Values

Value	Description
color	Set the background color
image	Set the background image
repeat	Set how to repeat a background image
attachment	Set whether to scroll a background image with the page
position	Set the starting position of a background image
size	Set the size of a background image
origin	Set the background positioning origin
clip	Set the painting area of a background image
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	transparent none repeat scroll 0% 0% auto padding-box border-box
Return Value:	A string, representing the background property
CSS Version	CSS1 and new properties in CSS3

Example

The following code shows how to style the background of a document.


<!DOCTYPE html>
<html>
<body>
<!--  w  ww  . j ava2 s .co  m-->
<h1>Hello World!</h1>

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

<script>
function myFunction() {
    document.body.style.background = "#f3f3f3 url('http://java2s.com/style/demo/border.png') no-repeat right top";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the background of a DIV element:


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--  ww w  .  ja  va 2 s.  c  o m-->
    width: 500px;
    height: 500px;
    background: coral url('http://java2s.com/style/demo/border.png') no-repeat fixed center;
    color: white
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">My DIV element</div>

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

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to set a background color for a document.


<!DOCTYPE html>
<html>
<body>
<!--from  www . j  a v  a 2s  . c o m-->
<h1>Hello World!</h1>

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

<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set a background image for a document.


<!DOCTYPE html>
<html>
<body>
<!--from  w ww.j a v  a 2  s  .c  o m-->
<h1>Hello World!</h1>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.body.style.backgroundColor = "#f3f3f3";
    document.body.style.backgroundImage = "url('http://java2s.com/style/demo/border.png')";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to set a background-image to no-repeat.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!-- w  ww.  ja  v  a  2 s .  c  o m-->
    background: #f3f3f3 url('http://java2s.com/style/demo/border.png');
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.body.style.backgroundRepeat = "no-repeat";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 6

The following code shows how to set the background-image to be fixed.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!-- www  .ja  va  2  s .c  o m-->
    background: #f3f3f3 url('http://java2s.com/style/demo/border.png') no-repeat right top;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<button onclick="myFunction()">test</button>
<br> 

<script>
function myFunction() {
    document.body.style.backgroundAttachment = "fixed";
}
</script>
<p>test <br><br><br><br> text test <br><br><br><br> text
test <br><br><br><br> texttest <br><br><br><br> text
</p>
</body>
</html>

The code above is rendered as follows:

Example 7

The following code shows how to change the position of a background-image.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w  ww. j a v  a  2  s. co m-->
    background-image: url('http://java2s.com/style/demo/border.png');
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.body.style.backgroundPosition="top right"; 
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 8

The following code shows how to get the background property values of a document


<!DOCTYPE html>
<html>
<body style="background:#f3f3f3 url('http://java2s.com/style/demo/border.png') no-repeat right top;">
<!-- w ww . j  ava  2 s  . co  m-->
<h1>Hello World!</h1>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.body.style.background);
}
</script>

</body>
</html>

The code above is rendered as follows: