Style backgroundRepeat 属性

定义和用法

backgroundRepeat How to set or return how the background image is repeated (tiled).

See also:

HTML Styles:background attribute

CSS Tutorial:CSS-bakgrund

CSS3 Tutorial:CSS3 Backgrounds

CSS Reference Manual:background-repeat attribute

Instance

Example 1

Set the background image to not repeat (no-repeat):

document.body.style.backgroundRepeat = "repeat-y";

Try it yourself

Example 2

Change the backgroundRepeat attribute of the specified DIV element:

document.getElementById("myDIV").style.backgroundRepeat = "repeat-x";

Try it yourself

Example 3

Set the background image to repeat horizontally or vertically:

function repeatVer() {
  document.body.style.backgroundRepeat = "repeat-y";
}
function repeatHor() {
  document.body.style.backgroundRepeat = "repeat-x";
}

Try it yourself

Example 4

Return the background-repeat value of the document:

alert(document.body.style.backgroundRepeat);

Try it yourself

Syntax

Return the backgroundRepeat attribute:

object.style.backgroundRepeat

Set the backgroundRepeat attribute:

object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"

Attribute value

Value Description
repeat The background image is repeated both vertically and horizontally. Default.
repeat-x The background image is repeated horizontally only.
repeat-y The background image is repeated vertically only.
no-repeat The background image is not repeated.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: repeat
Return value: A string that indicates how the background image is repeated.
CSS version: CSS1

Browser support

backgroundRepeat It is a CSS1 (1996) feature.

All web browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Stöd Stöd Stöd Stöd Stöd Stöd