Trying to apply mulitple gradients as a background

[brenda813]

I have a website in which I’m trying to get a radial gradient background, overlaid with pinstripes. I’ve achieved that using two gradients. Here’s my original CSS based on a CSS-Tricks post:

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

Here’s a link of my desired effect. I’m having trouble getting it to work in Code Pen, so hopefully this JS Fiddle link will work in it’s place.

http://jsfiddle.net/bnies813/smt3uuv8/

In Firefox, the stripes look great, but when I take it into Chrome, it looks horrible. The thickness of the stripes are all uneven. I found a post online that showed me a way to change the code and make it look good in both Firefox and Chrome. However, this change will not allow me to apply both gradients.

Here’s a Code Pen of my current code:

http://codepen.io/bnies813/pen/QboGKR

Any help would be greatly appreciated!!!

[Author]

Posts