HTML DOM Style backgroundRepeat property
Style Objects Definition and Usage
backgroundRepeat property sets or returns how to repeat a background image.
grammar
Setting backgroundRepeat properties:
Object.style.backgroundRepeat="repeat|repeat-x|repeat-y|no-repeat|inherit"
Back backgroundRepeat properties:
Object.style.backgroundRepeat
| 值 | 描述 |
|---|---|
| repeat | 默认。垂直和水平方向重复背景图像。 |
| repeat-x | 水平方向重复背景图像。 |
| repeat-y | 垂直方向重复背景图像。 |
| no-repeat | 不重复背景图像。 |
| inherit | background-repeat 属性的设置从父元素继承。 |
Browser Support
All major browsers support backgroundRepeat property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Examples
Examples
Background image repeated in the vertical direction:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ 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 ()"> vertical repeating background image </ button>
<br>
<H1> Hello World! </ H1>
<P> This is a paragraph </ p>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ 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 ()"> vertical repeating background image </ button>
<br>
<H1> Hello World! </ H1>
<P> This is a paragraph </ p>
</ Body>
</ Html>
try it"
Style Objects