css zebra stripe background without image

Question

possible to use css to have zebra stripe as background without using image?

Answer 1

Yes you can, with something like

ul li {
   background-color: #fff;
}

ul li:nth-child(even) {
   background-color: #efefef;
}

See:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/understandingnthchildexpressions

---

Edit

You really should've stated clearly what you meant by zebra strips ;)

If you need gradient backgrounds without using images, see:

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

Basically, the syntax you'll be using will look something like:

background-image: -moz-linear-gradient(left, #fff, #999);
background-image: -webkit-gradient(linear, #fff, #999);

See:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://webkit.org/blog/175/introducing-css-gradients/

For more details

Answer 2

Not really in the context I think you are referring to. You can use CSS3 selectors to target alternating items.

ul li {
 background-color:#000;
}
ul li:nth-child(odd) {
 background-color:#FFF;
}

Even though you stated no image, the best solution would be to use a 1 pixel wide image with 2 rows that you repeat across x and y axis.

Answer 3

It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css

http://stackoverflow.com/questions/35879/base64-encoding-image

or alternatively using canvas or the svg namespace to draw it yourself