Little Web Hut

CSS 2.1 Reference: background-repeat Property

CSS background-repeat Property
Syntax
selector {background-repeat: value;}
  • value is specified by using one of the following keywords: repeat, repeat-x, repeat-y, no-repeat, or inherit.
Usage

The background-repeat property is used to specify if, and how, the element's background image will repeat. The background image can repeat horizontally, vertically, in both directions, or not at all.

This property is specified by using a keyword according to the syntax shown above.


CSS Example: The background-repeat property is set for the image to repeat horizontally and vertically.
  body {background-image: url("../images/floatingball.gif");
    background-repeat: repeat;
  }
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The background-repeat property is set for the image to repeat horizontally.
  body {background-image: url("../images/floatingball.gif");
    background-repeat: repeat-x;
  }
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The background-repeat property is set for the image to repeat vertically.
  body {background-image: url("../images/floatingball.gif");
    background-repeat: repeat-y;
  }
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The background-repeat property is set to prevent the image from repeating.
  body {background-image: url("../images/floatingball.gif");
    background-repeat: no-repeat;
  }
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • repeat (Repeat the background image horizontally and vertically.)
  • repeat-x (Repeat the background image horizontally.)
  • repeat-y (Repeat the background image vertically.)
  • no-repeat (Do not repeat the background image.)
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
Applies To All elements
Inherited No
Initial Value repeat


background-repeat Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe background-repeat property is set for the image to repeat horizontally and vertically.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe background-repeat property is set for the image to repeat horizontally.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe background-repeat property is set for the image to repeat vertically.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe background-repeat property is set to prevent the image from repeating.