Question

I did this background in firefox but I can’t replicate it in webkit/chrome (I have tried several alternatives but nothing):

background: -moz-repeating-linear-gradient(0deg, gray, transparent 1px, transparent 5px) repeat scroll 0 0 white;

What would be the correct translation? It is possible to achieve the same pattern? (or at least a very close one).

Thanks!

Answer 1

Oh! It was there in the documentation! :

http://www.webkit.org/blog/175/introducing-css-gradients/

If you want to achieve effects like
tiling of a vertical gradient using a
narrow strip, you should specify
background-size to give the gradient
tile an explicit size.

So it was fixed adding:

background-size: 10px;

Gecko and Webkit acts differently in this matter: While Gecko will adjust the background size automatically if you specify the gradient steps in “px”, webkit will (possibly) calculate the % based in the “px” measure you set.

I’m not sure if my English is correct, but that is the idea…