CSS background-repeat Property

Example

Repeat a background-image only vertically:

body {
  background-image: url("blue.jpg");
  background-repeat: repeat-x;
}

Definition and Usage

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

Default value:	repeat
Inherited:	no
Animatable:	no.
Version:	CSS1
JavaScript syntax:	object.style.backgroundRepeat="repeat-x"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-repeat is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

Note: IE8 and earlier do not support multiple background images on one element.

CSS Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Property Values

Value	Description	Demo
repeat	The background image is repeated both vertically and horizontally.  The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Repeat a background image both vertically and horizontally (this is default):

body {
  background-image: url("rose.png");
  background-repeat: repeat;
}

Example

Repeat a background image only horizontally:

body {
  background-image: url("rose.png");
  background-repeat: repeat-x;
}

Example

Do not repeat a background image. The image will only be shown once:

body {
  background-image: url("rose.png");
  background-repeat: no-repeat;
}

Example

Using background-repeat: space and background-repeat: round:

#example2 {
  border: 2px solid blue;
  padding: 25px;
  background: url("heart.png");
  background-repeat: space;
}

#example3 {
  border: 1px solid blue;
  padding: 25px;
  background: url("heart.png");
  background-repeat: round;
}

Example

Use different background properties to create a "hero" image:

.hero-image {
  background-image: url("road.jpg"); /* The image used */
  background-color: #888; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}