Easy Tutorial
❮ Dom Obj Canvas Dom Obj Anchor ❯

backgroundRepeat Property


Definition and Usage

The backgroundRepeat property sets or returns how the background image is repeated.

Syntax

Setting the backgroundRepeat property:

Returning the backgroundRepeat property:

Value Description
repeat Default. The background image is repeated both vertically and horizontally.
repeat-x The background image is repeated horizontally.
repeat-y The background image is repeated vertically.
no-repeat The background image is not repeated.
inherit The background-repeat property is inherited from the parent element.

Browser Support

All major browsers support the backgroundRepeat property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if the !DOCTYPE is specified. IE9 supports "inherit".


Example

Set the background image to repeat vertically:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
body{
    background:#f3f3f3 url('img_tree.png');
}
</style>
<script>
function displayResult(){
    document.body.style.backgroundRepeat="repeat-y";
}
</script>
</head>
<body>

<button type="button" onclick="displayResult()">Repeat background image vertically</button>
<br>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
    
</body>
</html>

❮ Dom Obj Canvas Dom Obj Anchor ❯