Kilian Valkhof

Front-end & user experience developer, Jedi.

Random CSS Thought: Advanced background repeat options

Design, 22 February 2007, 2 minute read

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:

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. I’d love to see this in CSS3!

    I’m also looking forward to the fact that you can have multiple backgrounds on CSS3; the only problem is compatibility with browsers, it will take way too much time for users to upgrade!

  2. […] Advanced background repeat options […]

  3. […] Advanced background repeat options […]

  4. Nomii

    Is there a way in which i can make an image repeat from point x,y onwards only in direction x to the right (and not right and left like it does right now)? ?

    Thanks!

  5. Ganesh Kondalkar

    Hi,

    I tried above CSS but its not showing me what you have written. Is the above thing u assumed that it will be implements in future CSS version? or do u have any demo.html page to show this is working?

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.