Style backgroundProperty
Style Object
Definition and Usage
The background property sets or returns up to five separate background properties in shorthand form.
Through this property, you can set/return:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
The above properties can also be set as individual style properties. It is strongly recommended to use separate properties for better control.
Syntax
Setting the background property:
Object.style.background="color image
repeat attachment position"
Returning the background property:
Object.style.background
Tip:The default value of the background property is: transparent none repeat scroll 0% 0%.
| Parameter | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image of an element |
| repeat | Sets how the background image is repeated |
| attachment | Sets whether the background image is fixed or scrolls with the rest of the page |
| position | Sets the starting position of the background image |
Browser Support
All major browsers support the background property.
Example
Example
Sets the style of the document background:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function displayResult(){
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeat right top";
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<br>
<button type="button" onclick="displayResult()">Set Background</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function displayResult(){
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeat right top";
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<br>
<button type="button" onclick="displayResult()">Set Background</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions