CODEWITHSUNDEEP
htmlcsslinear-gradientsradial-gradients
Brenda813
Brenda813

Reputation: 41

CSS Stripes Not Displaying Correctly in Chrome

I have a website in which I'm trying to get a background of subtle pinstripes using two gradients. I achieved that using this CSS: 

 background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        #101010 4px,
        #737373 4px 
       ),
        repeating-radial-gradient(
        #616161,
        #222222 
        );

In Firefox, the stripes look great, but when I take it into Chrome, it looks horrible.

If you open this link in Chrome, you should be able to see what I mean.

JS Fiddle - Not appearing correctly in Chrome

I've tried finding a solution online and the closest I've come is this post:

css striped bg oddities in Chrome

I applied the code from the above post, into my CSS, adding in the radial gradient. Here's my JS Fiddle to show my result.

JS Fiddle - Strange Checkerboard

When I apply it, as you'll see, or have seen, I get a strange checkerboard pattern. How can I get an angled, linear gradient on top, a radial gradient on the bottom and have them appear correctly in all browsers?

I even tried combining the CSS I stared with, with the "webkit" block and that didn't work at all:

    html {
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);

-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px; 
};

Any help would be greatly appreciated!! I have searched for hours, tried many things...and cannot get this work!

Upvotes: 1

Views: 272

Answers (1)

Jose Mar
Jose Mar

Reputation: 694

   background: -webkit-repeating-linear-gradient(
   45deg, transparent, transparent 2px, #101010 4px, #737373 4px
   ),
   -webkit-repeating-radial-gradient(#616161, #222222); background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    #101010 4px,
    #737373 4px 
   ),
    repeating-radial-gradient(
    #616161,
    #222222 
    );

Try This on .

And Recommend a very useful site prefix your css

And the compatibility of browsers

Upvotes: 1

Related Questions