Easy Tutorial
❮ Jsref Bold Jsref Regexp Ignorecase ❯

background Property


Definition and Usage

The background property sets or returns up to five separate background properties in a shorthand form.

Using this property, you can set/return:

It is strongly recommended to use the individual properties for better control.

Syntax

Set the background property:

Return the background property:

Tip: The default value for 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

Set the style of the document background:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</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>

❮ Jsref Bold Jsref Regexp Ignorecase ❯