background-repeat

The background-repeat property specifies how background images are tiled after they have been sized and positioned.

Values
DOM
Example | no-repeat
Example | repeat
Example | repeat-x
Example | repeat-y
Example | round
Example | space
Example | DOM
External

Values


            background-repeat: value

Value	Initial	Description
no-repeat		The image is placed once and not repeated in this direction.
repeat	repeat	The image is repeated in this direction as often as needed to cover the background painting area.
repeat-x		Computes to 'repeat no-repeat'.
repeat-y		Computes to 'no-repeat repeat'.
round		The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does. See the formula under 'background-size'. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.
space		The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of 'background-position' for this direction is ignored, unless there is not enough space for two copies of the image in this direction, in which case only one image is placed and 'background-position' determines its position in this direction.

DOM


            object.style.backgroundRepeat = "value";

Example | no-repeat

Example | repeat

Example | repeat-x

Example | repeat-y

Example | round

Example | space

Example | DOM

<!doctype html>
<html>
<head>
  <script>
    function load() {
      document.body.style.backgroundImage = "url(/assets/png/HappyFace.png)";
    }
    function mouseover1() {
      document.body.style.backgroundRepeat = "no-repeat";
    }
    function mouseover2() {
      document.body.style.backgroundRepeat = "repeat";
    }
    function mouseover3() {
      document.body.style.backgroundRepeat = "repeat-x";
    }
    function mouseover4() {
      document.body.style.backgroundRepeat = "repeat-y";
    }
    function mouseover5() {
      document.body.style.backgroundRepeat = "round";
    }
    function mouseover6() {
      document.body.style.backgroundRepeat = "space";
    }
  </script>
</head>
<body onload="load()">
  <a href="/" onmouseover="mouseover1()">no-repeat</a>
  <a href="/" onmouseover="mouseover2()">repeat</a>
  <a href="/" onmouseover="mouseover3()">repeat-x</a>
  <a href="/" onmouseover="mouseover4()">repeat-y</a>
  <a href="/" onmouseover="mouseover5()">round</a>
  <a href="/" onmouseover="mouseover6()">space</a>
  <p>background-repeat</p>
</body>
</html>

External

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

W3C CSS Backgrounds and Borders Module Level 3