CSS background-repeat Property

The background-repeat property is used to specify how background images should be repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
Repetition of the background image happens after it has been sized and positioned.

The initial value of background-repeat property is repeat. You can apply this property to all elements. It also applies to ::first-letter and ::first-line. This property is neither inheritable nor animatable.

If a background image is repeated, it may happen that some of its tiles get clipped if they don’t fit a whole number of times into the background positioning area of the element. Prior to CSS3, there was nothing a developer could do to prevent that. But in the backgrounds and borders module level 3, two new values have been introduced that allow developers to prevent the image clipping by either rescaling that image so that it fits a whole number of times, or repeating the image as often as it will fit within the area without being clipped, and then spacing the images out to fill the area.

Syntax

This is the formal syntax for using background-repeat property —

background-repeat: <repeat-style> [ , <repeat-style> ]*    
/* where */
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Here are some examples of using this property —

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;  

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: no-repeat round;

Acceptable Values

repeat-x

This value computes to repeat no-repeat. In this case, the background image is repeated horizontally but not vertically.

repeat-y

This value computes to no-repeat repeat. In this case, the background image is repeated vertically but not horizontally.

repeat

This value computes to repeat repeat. In this case, the background image is repeated in both horizontal and vertical direction.

space

This value computes to space space. With the space value, the image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
The background-position property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn’t enough room to display one image.

round

This value computes to round round. With the repeat value, as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.

no-repeat

This value computes to no-repeat no-repeat. In this case, the background image is not repeated at all. This might result in some background area not being covered by any image.

In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical repetition behavior. All the keywords still work in the same manner but this time they only act in specific direction.

Examples

In the following example, I applied a background image to three different elements. You can see how the behavior and location of the background image has changed in all three cases. In the third case, the image is fixed to the viewport and it won't move with the element. To know in more detail about these properties and the values they can take, you can read the corresponding article.

See the Pen CSS background-repeat Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The background-repeat property is supported in all major browsers like Chrome, Firefox, Safari, Opera, IE, and on Android and iOS. However, round and space keywords are only supported in IE9+, Firefox 49+ and Opera 10.5+.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top