Colorful stripes made with linear-gradients

#css

#linear-gradient

#background

I created a colorful stripes background inspired by the header image of http://www.wearejh.com.

Before we start...

I use prefixfree to avoid the vendor prefix hell... so should you!
http://leaverou.github.com/prefixfree

Here we go

Colorful stripes (CSS)

body {
  background: 
    /* single */
    linear-gradient(top, #ff0 0%, #f00 100%),
    linear-gradient(top, #e20687 0%, #a21465 100%),
    linear-gradient(top, #d8479e 0%, #a1c4d1 100%),
    linear-gradient(top, #f9d307 0%, #8cc9d7 100%),
    linear-gradient(top, #0077aa 0%, #50a3d8 100%),
    linear-gradient(top, #a1c4d1 0%, #d8479e 100%),

    /* master */
    linear-gradient(left, 
      #1e5799 4%,
      #1f9b7e 4%,
      #1f9b7e 8%,
      #fff 8%,
      #fff 10%,
      #5d24b7 10%,
      #5d24b7 11%,
      #be2e2e 11%,
      #be2e2e 13%,
      #fff 13%,
      #fff 15%,
      #d6942a 15%,
      #d6942a 17%,
      #b8d899 17%,
      #b8d899 21%,
      #fff 21%,
      #fff 27%,
      #8ace31 27%,
      #8ace31 34%,
      #fff 34%,
      #fff 36%,
      #f6b818 36%,
      #f6b818 40%,
      #e63737 40%,
      #e63737 44%,
      #fff 44%,
      #fff 52%,
      #f00 52%,
      #f00 54%,
      #fff 54%,
      #fff 60%,
      #e20687 60%,
      #e20687 64%,
      #fff 64%,
      #fff 70%,
      #8cd5f7 70%,
      #8cd5f7 72%,
      #fff 72%,
      #fff 73%,
      #ec6529 73%,
      #ec6529 74%,
      #fff 74%,
      #fff 75%,
      #d6942a 75%,
      #d6942a 76%,
      #fbe90f 76%,
      #fbe90f 81%,
      #fff 81%,
      #fff 85%,
      #1e5799 85%,
      #1e5799 88%,
      #8ace31 88%,
      #8ace31 89%,
      #fff 89%,
      #fff 92%,
      #ffe60a 92%,
      #ffe60a 94%,
      #f70909 94%,
      #f70909 96%,
      #8ace31 96%,
      #8ace31 99%,
      #fff 99%,
      #fff 100%
    );

  background-size: 
    /* single */
    2% 100%,
    3% 100%,
    5% 100%,
    2% 100%,
    1% 100%,
    2% 100%,

    /* master */
    100% 1em
  ;

  background-position:
     /* single */
    12%,
    23%,
    48%,
    55%,
    59%,
    64%,

    /* master */
    0%
  ;

  background-repeat:
    /* single */
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,

    /* master */
    repeat
}

Single gradients - from top to bottom

The single gradients have a specific background-size and background-repeat because I don't want them to fill the whole body.
The position is set by background-position.