CODEWITHSUNDEEP
csslinear-gradients
George Mauer
George Mauer

Reputation: 122172

css3 repeating-linear-gradient - get fine-grained pattern?

I would like to create a fine-grained background pattern that alternates between diagonal red and blue lines, each just a couple of pixels in width.

I'm not sure I'm understanding the rules of repeating linear gradients

For example you would think what I want is something like this:

p {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, red 3px, blue 3px)
}

but that renders entirely blue.

Here is an example

What am I doing wrong?

Upvotes: 1

Views: 1686

Answers (1)

ayke
ayke

Reputation: 1689

The '3px' you put there is an offset from the start, not a relative offset from the last color stop.

If you want to see alternating colors (without a gradient), you would need something different:

body {
    background-image: repeating-linear-gradient(45deg, red 0px, red 3px, blue 3px, blue 6px);
}

The gradient starts with red (red 0px). Then goes to red the next three pixels (red 3px). Then changes to blue (blue 3px) and makes the next three pixels blue (blue 6px).

See http://jsfiddle.net/uhB3G/1/ (works only in current Firefox, IIRC FF 17+)

Upvotes: 1

Related Questions