css - Need help understanding css3 gradients and background-repeat -

I've found it here where I'm trying to make my little 8-bit friend in CSS3

On line 89, I'm starting to work on the beard. But this is not exactly right.

It is currently replacing X and Y, but it is making vertical bars instead of the Polka-dot effect. If you want to repeat the row 98 ( background-repeat: repeat-x; ), you will see that its the correct method, but then it is not vertical (obviously) (I like Div any height and it still works, then know?). I feel that the patterns repeat correctly in both directions. This overlap or something looks like when repeated or repeated-y is turned on.

In the color-stop () , I basically use the transparent $ face instead of color, but in return the whole thing Became red

What I am trying to achieve, please refer to my avatar on this site.

[edit] I think this is complicated because my pattern repeats not directly the checker pattern, that is a close-up of the minimum pattern:

The problem is one of the backgrounds that completely covers the other. Others are not seen just because I try and understand how I do it.

Update So .. this is not the easiest way to imagine that it is possible to do that by Lee Verao using diagonal gradients -

The problem is that if you reduce too much size then it will not be correct - here is a tinkerbie I am doing this -