CSS background-image: repeating-linear-gradient cross browser

Question

The following CSS class is only working in modern chorme or firefox:

.grating{
background-image: repeating-linear-gradient(-45deg, 
        transparent, 
        transparent 7px, 
        rgba(255,255,255,1) 5px, 
        rgba(255,255,255,1) 10px
    );
}

So I need some CSS code that will work in old IE too. I think I need something like this:

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

And for IE should be:

progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

These are just examples for other CSS classes not for mine.

Ultimately what I need is this:

(just the white stripes) background-color can be different in different situations and sqaure size can be bigger or smaller, so I just need stripes that should be one transparent antoher white, one transparent antoher white....

I have no idea how to traduce my class to IE <10 friendly syntaxes...I think I need some expert help...

Answer 1

Browser Support The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

repeating-linear-gradient

---

• IE > 10.0
• chrome > 26.0 -webkit- (10.0)
• firefox > 16.0 -moz- (3.6)
• safari > 6.1 -webkit- (5.1)
• opera > 12.1 -o- (11.1)

MDN , support browser (caniuse)

.grating {
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Standard syntax */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
 /* IE 5 to 9*/
 filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);
 }