Question

I want to make a zebra-like pattern with pure CSS. The one working has multiple instances of a span to generate the repeat. Here is the code.

<div id="wrap">    
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
 <span class="five"></span>
</div>

​
I know that this would be easier with an x-repeating stripe but I want to know if it is possible to make with pure CSS without using multiple instances of a <span> or <div> like:

<div id="wrap">    
 <span></span>
</div>

#wrap span {
 background: #000;
 /* stripe shape coordinates */

 repeat: x-repeat; /* something like this */
}

Answer 1

I think this thread is what you’re looking for, and particulary something like this. It’s css3 gradients used to make patterns. Basically, you create a pattern for the background, and then let that pattern repeat. However, older browsers won’t work, but I don’t know if that’s an issue.