CSS Background Image repeat Property

Last Updated Jul 21, 2015, 12:00:06 PM

CSS Background Image repeat Property

The CSS background-repeat property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.

Specifies how a background image will repeat itself within a box.

By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).

Definition and Usage

Initial Value repeat
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media Visual
Computed Value a list, each item consisting of two keywords, one per dimension
Animatable no
Canonical Order The unique non-ambiguous order defined by the formal grammer
Possible Values


repeat (default) - tiled, repeating the image both horizontally and vertically.

repeat-x - repeating the image horizontally only.

repeat-y - repeating the image vertically only.

no-repeat - not repeating the image at all, showing just one instance.

The default value for background-repeat is "repeat." The background image is repeated both vertically and horizontally so that it covers the entire background image painting area. Now, if we only want the image to repeat horizontally on the X axis, we could use the value "repeat x" The value "repeat y" repeats the image vertically on the Y axis.

Let's look at an example of how we can change the css background with the background-image and background-repeat property

CSS Background Image repeat Example

Watch GIF Try It Now

You can also repeat the background image both vertically and horizontally as well

CSS Background Image repeat Horizontally Example

To repeat the css background-image horizontally you need to specify background-reapt property as repeat-x like this: background-repeat: repeat-x;
Watch GIF Try It Now

CSS Background Image repeat Vertically Example

To repeat the css background-image vertically you need to specify background-reapt property as repeat-y like this: background-repeat: repeat-y;
Watch GIF Try It Now

If we do not want our background images to repeat or tile, we'll need to use the value "no repeat" like this background-repeat: no-repeat; no repeat places the image once in the top left corner and it does not repeat it in any direction.

Watch GIF Try It Now

Browser compatibility
Basic support 1.0 1.0 (1.7 or earlier) 1.0 (85) 3.5 4.0 ? ?
Multiple backgrounds 1.0 1.3 (312) 3.6 (1.9.2) 10.5 9.0 ? ?
round and space keywords Not supported Not supported Not supported 10.5 9.0 ? ?

Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Example 1 Example 2 Example 3

Other CSS Background Properties you might want to Learn

CSS Background Color Properties

CSS Background Image Property

CSS Background Attachment Property

CSS Background Properties

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM