Kilian Valkhof

Random CSS Thought: Advanced background repeat options

Design, 22 February 2007, 5 comments

Background-repeat is an often used method of making smaller images possible while creating a filling background. But in my eyes it is far too limited. You could do much more with it:

Checkerboard patterns

To make these you have to make an image with at least 4 blocks, and then repeat that. What if you could control the space between each repeating image, in the x and y direction? Lets assume we use a 20px by 20px black image:

.foo {
	background-color: #ffffff;
	background-image: url("one-block.gif");
	background-position: 0 0;

	background-repeat: 20px/20px repeat
}

background repeat would take this form: background-repeat: direction x-spacing/y-spacing. So the above would position the image in the top left corner, skip 20px in both directions, and repeat it again. Effectively creating a nice checkerboard pattern. (Black and white, in this case.)

What happens with a repetition in one direction?

When you have a repetition in one direction (repeat-x or repeat-y) then you would also need only one spacing value. Lets assume we’re going for a stripy blue/light blue background here:

.bar {
	background-color: #ddddff;
	background-image: url("slightly-darker-blue.gif");
	background-position: 0 0;

	background-repeat: 20px repeat-y
}

This would create horizontal stripes, each 20px apart vertically. This code would work with a fixed-width container and an image with the same width. But by using both spacing options, we can make it width independent:

.bar {
	background-color: #ddddff;
	background-image: url("slightly-darker-blue-but-smaller.gif");
	background-position: 0 0;

	background-repeat: 0/20px repeat
}

This time, the image repeats in all directions. Horizontally without spacing, and vertically with 20px apart.

Shorthand

most people use the background: shorthand property, so it would have to work nicely with the shorthand too. And it does:

background:#ddf url("slighlty-darker-blue-but-smaller.gif") 0/20px repeat 0 0;

Doesn’t take away anything from the readability, does it? Of course, the default repeat spacing would be 0/0.

Even more interesting

With the multiple background possibility in CSS3, this would get even more interesting:

.foo {
	background:#ddf url("red.gif") 20px/20px repeat 0 0,
		url("green.gif") 20px/20px repeat 10px 10px,
		url("blue.gif") 20px/20px repeat  20px 20px;
}

I’m sorry that you have to imagine a background like that (I truly am), but it serves the general idea perfectly. The code above creates a red/green/blue checkerboard pattern, and allows you to be even more flexible with your backgrounds. Just think of combining this with alpha-transparent png’s. Diagonal stripes just got easier :)

Discussion

Would this make your life as a CSS developer easier? Please share your thoughts in the comments.

Other CSS thoughts
If you enjoyed this article, please consider reading any of my previous CSS thought articles:

• Solving equal height columns
• Background-z-index
• Math in CSS