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

I've got a [CodePen][1] 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 no difference either way.

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


  [1]: http://codepen.io/CWSpear/pen/8-bit/3