Need help understanding css3 gradients and background-repeat

Question

I've got a CodePen here where I'm trying to make my little 8-bit dude into CSS3.

On line 89, I start working on the beard. But it's not quite right.

It's currently repeating x and y, but it's making vertical stripes instead of the polka-dot effect I'm going for. If you uncomment line 98 (background-repeat:repeat-x;), then you'll see it has the right pattern, but then it doesn't repeat vertically (obviously) (I'd like the div to be any height and this would still work, ya know?). I want that pattern to repeat correctly in both directions. It seems to overlap or something when it has repeat or repeat-y turned on.

In the color-stops(), I originally used transparent instead of the $face color, but it made the whole thing red instead.

To know what I'm trying to achieve, please reference my Avatar on this site.

[edit] I think it's extra complicated because my pattern isn't a straight checkered pattern. Here's a close-up of the minimum pattern that repeats:

Answer 1

The problem is one of the backgrounds is completely covering the other. The others simply not being seen. I'll try and figure out how I'd do it.

Update So.. it's not that easy. The only way I imagine as being possible to do is by using diagonal gradients as Lea Verou did here - http://lea.verou.me/css3patterns/#checkerboard

The problem is, if you shrink the sizes too much it won't look perfect - here's a tinkerbin with me doing so - http://tinkerbin.com/MQaHKuJI