Home/ Questions/Q 8187219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T02:29:21+00:00

I’m trying to create a diagonally-striped background pattern with CSS3 gradients, but I can’t

  • 0

I’m trying to create a diagonally-striped background pattern with CSS3 gradients, but I can’t seem to get it to work. This is the code I am using: 

body {
background-color: gray;
background-image: repeating-linear-gradient(135deg, transparent, transparent 35px,    rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}

It just displays a solid, gray background. When I inspect element, it shows that background-image is an invalid property value. I am coding on a mac, and have tested on Firefox 13.0.1 and Chrome v20.

Does anyone know what the issue is?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your browser likely doesn’t support the unprefixed property. Try using the vendor prefixes:

    html, body { 
    min-height: 100% 
}
body {
    background-color: gray;
    background-image: -webkit-repeating-linear-gradient( 135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-image: -moz-repeating-linear-gradient( 135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-image: -ms-repeating-linear-gradient( 135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-image: -o-repeating-linear-gradient( 135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-image: repeating-linear-gradient( 135deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}​

    Fiddle: http://jsfiddle.net/fefhz/7/

    • 0