Hi I have this image I want to make a background gradient from it instead of puting it into the CSS:

Is it possible or am I pushing the limits of CSS3 gradients.
And I'm not looking for a solution with multiple divs or any kind of hacks, just gradient or repeating-gradient for one css class that I can assign to an element and have the desired pattern assign to it.

update:

If you check the image above you'll see the blue stripes doesn't have the same width, so based on @vals's answer below, 2 gradients are not enough to have this pattern, we need 7 but I failed on realizing this pattern with regular linear-gradient or the repeating one, so what I'm missing here is how to draw each strip for a div with known width and height to have this pattern with the same number of stripes and strip widths.

---

You can set 2 different gradients in the same background. Then, all you need is to dimension and position them as needed

div {
    width: 400px;
    height: 400px;
    background-image: repeating-linear-gradient(45deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px), repeating-linear-gradient(135deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px);
    background-size: 100% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

demo

链接地址: http://www.djcxy.com/p/89424.html

上一篇: Bootstrap Navbar CSS

下一篇: 是否有可能用css3重复渐变创建此模式？