New Repeating Background Image Options in CSS3

Share this article

In CSS2.1, the background-repeat property had four options: no-repeat, repeat, repeat-x and repeat-y. While these are undoubtedly useful, they don’t permit finer control over the repeating process and tiles will be clipped if they don’t fit the container an exact number of times. CSS3 introduces two new options: space and round

background-repeat: space

The space option will repeat a tile horizontally and vertically without clipping or resizing the or image, e.g.

background-repeat: space;
background repeat space

background-repeat: round

The round option will repeat a tile horizontally and vertically without clipping, but the image may be resized, e.g.

background-repeat: round;
background repeat round Assume we have a background image with a width 100px (actual or resized using the CSS3 background-size property). This is contained in an element with 520 horizontal pixels, so:
round(520 / 100) = round(5.2) = 5
The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container.

Differing Horizontal and Vertical Repeats

background-repeat can be passed two values to alter the horizontal and vertical repeating, e.g.

background-repeat: round space; /* width resizes, height static */
background-repeat: space round; /* width static, height resizes */
background-repeat: space no-repeat; /* fit tiles horizontally only */

Changing the Background Position

Tiling with space or round will only work as you expect if the background-position is set to 0 0. You are free to change it; the image sizes and spacing will be tiled the same but the top-left offset is moved accordingly.

Browser Compatibility

Two browsers support the space and round
properties. Guess which ones? You’re wrong: it’s IE9 and Opera. At the time of writing, they are not implemented in Firefox, Chrome or Safari. It gets worse:
  • When Firefox encounters space or round it falls back to repeat.
  • When Chrome or Safari encounter space or round they fall back to no-repeat. In addition, the webkit browsers appear to recognize the properties but don’t render them correctly.
Great. Thanks guys. The only way to achieve any sort of consistency is to force Firefox to render like webkit, e.g.

#element
{
	background-repeat: no-repeat;
	background-repeat: space;
}
Therefore:
  • IE9 and Opera will correctly repeat a tile horizontally and vertically without clipping or resizing the image.
  • Firefox won’t recognize space, falls back to the no-repeat setting and shows a single tile.
  • Chrome and Safari recognize space but incorrectly show a single, non-repeated title.
Nasty. It might be best to wait a few more months until Mozilla and Webkit add full support for CSS3 background-repeat. View the CSS3 background-repeat demonstration page…

Frequently Asked Questions about CSS3 Background Repeat

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

In CSS3, the ‘background-repeat’ property is used to control how a background image is repeated in the background of an element. ‘repeat-x’ and ‘repeat-y’ are two values of this property. ‘repeat-x’ makes the background image repeat horizontally, i.e., it will repeat from left to right. On the other hand, ‘repeat-y’ makes the background image repeat vertically, i.e., it will repeat from top to bottom.

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

The ‘no-repeat’ value in CSS3 ‘background-repeat’ property is used when you don’t want your background image to repeat. When you set the ‘background-repeat’ property to ‘no-repeat’, the background image will appear only once in the background of the element. It will not repeat either horizontally or vertically. This is particularly useful when you have a large image that you want to display fully in the background without any repetition.

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

Yes, you can use multiple values in the CSS3 ‘background-repeat’ property. This is done by specifying two values separated by a space. The first value sets the horizontal repeat and the second value sets the vertical repeat. For example, ‘repeat no-repeat’ will make the background image repeat horizontally but not vertically.

What does the ‘space’ value do in CSS3 background-repeat?

The ‘space’ value in CSS3 ‘background-repeat’ property is used to make the background image repeat as much as possible without clipping. The images are evenly spaced, and the first and last images are touching the edges of the element. If the image does not fit a whole number of times, it is rescaled so it does.

How does the ’round’ value work in CSS3 background-repeat?

The ’round’ value in CSS3 ‘background-repeat’ property is used to make the background image repeat as much as possible without clipping. Unlike the ‘space’ value, the images are not spaced but are resized to fit a whole number of times. This means the image may appear larger or smaller than its original size.

Can I use the ‘background-repeat’ property with gradient backgrounds?

No, the ‘background-repeat’ property does not work with gradient backgrounds. Gradients are not considered images in CSS3, so they cannot be repeated. Instead, they automatically stretch to fill the entire element.

What happens if I don’t specify a ‘background-repeat’ value?

If you don’t specify a ‘background-repeat’ value, the default value is ‘repeat’. This means the background image will repeat both horizontally and vertically to fill the entire element.

Can I control the position of the repeated background image?

Yes, you can control the position of the repeated background image using the ‘background-position’ property. This property sets the initial position of the background image and is not affected by the ‘background-repeat’ property.

How can I make a background image repeat in a specific direction?

You can make a background image repeat in a specific direction by using the ‘repeat-x’ or ‘repeat-y’ value in the ‘background-repeat’ property. ‘repeat-x’ makes the image repeat horizontally, and ‘repeat-y’ makes it repeat vertically.

Can I use the ‘background-repeat’ property with multiple background images?

Yes, you can use the ‘background-repeat’ property with multiple background images. You can specify a different ‘background-repeat’ value for each image by separating the values with a comma. The first value corresponds to the first image, the second value to the second image, and so on.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

backgroundCSSCSS3HTML5 Dev CenterHTML5 Tutorials & Articlesimageslearn-advanced-cssResponsive Design
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form