CSS3 1px diagonal lines gradient

Question

I want to create a diagonal pattern using CSS3, something like this:

So 1px dark diagonal line, 1px light diagonal line and so on...

This is what i came up with, i feel like i'm close but something is defenitely not right:

background-color: #454545;
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 4px);

Demo:

http://tinkerbin.com/6mTBtADt

Answer 1

just use background-size with your exisiting code try to add this background-size: 8px 8px;

Answer 2

Your code looks great in Firefox, but I can see the problem when I view it in Chrome.

It actually looks like your gradient is correct, because if you cause redraws on the browser (i.e. by resizing it) it sometimes looks close to the Firefox version. This leads me to believe it is a bug in Chrome.

If you increase from 1px to 4px you can see it is working, but very jagged.