Repeating/tiling linear gradients in Html

In all browsers we're now able to tile the background gradient by defining it's dimensions. In this case we have a diagonal gradient from white to lightblue that has been repeated 10 times across the element:

.bg6{
background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(lightblue));
background: -webkit-linear-gradient(top left, white, lightblue);
background: -moz-linear-gradient(top left, white, lightblue);
background: -o-linear-gradient(top left, white, lightblue);
background: -ms-linear-gradient(top left, white, lightblue);
background: linear-gradient(to bottom right, white, lightblue);
background-size: 5% 100%;
}

Like This...

Firefox (and now WebKit) allows for something slightly different. Rather than tiling a slice of the gradient, the gradient can be repeated to infinity. here you can see how that works:

.bg7{
background: -webkit-repeating-linear-gradient(-45deg, white 0, lightblue 10%);
background: -moz-repeating-linear-gradient(-45deg, white 0, lightblue 10%);
background: -o-repeating-linear-gradient(-45deg, white 0, lightblue 10%);
background: -ms-repeating-linear-gradient(-45deg, white 0, lightblue 10%);
background: repeating-linear-gradient(-45deg, white 0, lightblue 10%);
}