CSS background-repeat Property

Definition and Usage

background-repeat Whether and how to repeat the background image based on the property settings.

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

Detailed Explanation

The background-repeat property defines the tiling mode of the image.

Start repeating from the original image, which is defined by background-image Definition, and based on background-position Placement of the value.

See Also:

CSS Tutorial:CSS Background

CSS Reference Manual:background-position Property

HTML DOM Reference Manual:backgroundRepeat Property

Example

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

Try It Yourself

Tips and Comments

Tip:The position of the background image is set by the background-position property. If the background-position property is not specified, the image will be placed at the top left corner of the element.

CSS Syntax

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

Property Value

Property Value

Value Description
repeat Default. The background image will be repeated both vertically and horizontally.
repeat-x The background image will be repeated horizontally.
repeat-y The background image will be repeated vertically.
no-repeat The background image will be displayed only once.
inherit Specifies that the background-repeat property should be inherited from the parent element.

Technical Details

Default Value: repeat
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.backgroundRepeat="repeat-y"

More Examples

How to repeat a background image vertically
This example demonstrates how to repeat a background image vertically.
How to repeat a background image horizontally
This example demonstrates how to repeat a background image horizontally.
How to display a background image only once
This example demonstrates how to display a background image only once.

Browser Support

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5