background-repeat (CSS property)

Share this article

Description

The background-repeat property controls whether or not a background-image is repeated (tiled), and if it is repeated, the property defines along which of the specified axes (x, y, or both) the image is to be repeated.

By default, a background-image is repeated along both vertical and horizontal axes, and is repeated in both directions. We use the background-repeat property to specify the axis along which an image should be repeated.

When a background image is repeated, it’s first placed according to the background-position property, and then begins repeating from that point in both directions. For example, a background-image that’s placed at a background-position of center center (the center of the element), and which has a background-repeat value of repeat, will repeat in both directions along the x and y axes—that is, up and down, left and right, starting from the center.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

Some area of the element in question must be visible if the background-image is to show through. If the element has no intrinsic height (either as defined by its content, or by its dimensions), the background won’t be visible. If an element contains only floated children that haven’t been cleared—see clear—no background will show, as the element’s height will be zero.

The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

Example

This style rule causes a background-image assigned to the element with ID "example" to repeat along the x axis:

#example{
  background-repeat: repeat-x;
}

Value

repeat

The value repeat ensures that the background-image is repeated in both directions (that is, left and right, and up and down), and along both axes, until the element’s background is fully covered.

repeat-x

The value repeat-x ensures that the background-image is repeated only along the x axis (that is, the horizontal axis in both directions—left and right) until the element’s background is fully covered along that axis.

repeat-y

The value repeat-y ensures that the background-image is repeated only along the y axis (that is, the vertical axis in both directions—up and down) until the element’s background is fully covered along that axis.

no-repeat

The value no-repeat ensures that the background-image is not repeated in any direction, and that only a single instance of the image will be placed at the coordinates specified by the background-position.

If no background-position has been specified, the image is placed at the element’s default left-top position (0,0).

Frequently Asked Questions (FAQs) about CSS Background-Repeat Property

What is the difference between ‘repeat-x’ and ‘repeat-y’ in CSS background-repeat property?

The ‘repeat-x’ and ‘repeat-y’ values in the CSS background-repeat property are used to control the repetition of the background image horizontally and vertically, respectively. When ‘repeat-x’ is used, the background image is repeated only horizontally, creating a continuous pattern from left to right. On the other hand, when ‘repeat-y’ is used, the background image is repeated only vertically, creating a continuous pattern from top to bottom. These properties are useful when you want to control the direction of the background image repetition.

How does the ‘no-repeat’ value work in the CSS background-repeat property?

The ‘no-repeat’ value in the CSS background-repeat property is used when you want the background image to appear only once and not repeat. When this value is set, the background image will be placed at the position specified by the background-position property and will not repeat or tile. This is particularly useful when you have a single image that you want to use as a background without any repetition.

Can I use multiple values in the CSS background-repeat property?

Yes, you can use multiple values in the CSS background-repeat property. This is particularly useful when you are working with multiple background images. You can specify a different repeat value for each background image by separating each value with a comma. The first value corresponds to the first background image, the second value to the second image, and so on.

How does the ‘space’ value work in the CSS background-repeat property?

The ‘space’ value in the CSS background-repeat property is used to tile the background image in both directions. The images are evenly spaced, and the first and last images are touching the edge of the element. If the space available isn’t enough for one more image, the images are resized to fit. This can be useful when you want to maintain a consistent space between each repetition of the background image.

What is the ’round’ value in the CSS background-repeat property?

The ’round’ value in the CSS background-repeat property is used to repeat the background image as much as possible without clipping. The image is resized so that it can be repeated a whole number of times within the element. This can be useful when you want to ensure that the entire background image is visible without any clipping.

How does the ‘inherit’ value work in the CSS background-repeat property?

The ‘inherit’ value in the CSS background-repeat property is used to make the element inherit the background-repeat property from its parent element. This means that the repeat value of the background image of the element will be the same as that of its parent element.

Can I use the CSS background-repeat property with gradients?

Yes, you can use the CSS background-repeat property with gradients. When used with a gradient, the background-repeat property will repeat the gradient pattern according to the specified value. This can be useful when you want to create a repeating gradient effect.

How does the ‘initial’ value work in the CSS background-repeat property?

The ‘initial’ value in the CSS background-repeat property is used to set the property to its default value. This means that the background image will repeat both horizontally and vertically, which is the default behavior of the background-repeat property.

What happens if I don’t specify a value for the CSS background-repeat property?

If you don’t specify a value for the CSS background-repeat property, the default value is ‘repeat’. This means that the background image will repeat both horizontally and vertically.

Can I control the repetition of the background image in one direction only?

Yes, you can control the repetition of the background image in one direction only. You can use the ‘repeat-x’ value to repeat the image horizontally, or the ‘repeat-y’ value to repeat the image vertically. This can be useful when you want to create a horizontal or vertical pattern with the background image.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form