CODEWITHSUNDEEP
webkitcsslinear-gradients
lepe
lepe

Reputation: 25200

How to translate background using -moz-repeating-linear-gradient to -webkit (specific example)

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!

Upvotes: 2

Views: 1015

Answers (2)

lepe
lepe

Reputation: 25200

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...

Upvotes: 2

Lea Verou
Lea Verou

Reputation: 23887

-webkit-repeating-greadient(...) :)

Supported by Chrome and Webkit nightlies.

Upvotes: 0

Related Questions