Color-stop issue with background image with a gradient...kinda

I have put a background image on the body element of my site and am trying to put a transparent linear-gradient over it. The image is from subtlepatterns.com and is a small image that repeats to fill the screen. When I add the gradient from top to bottom or bottom to top, I get what look like a repeating gradient, even though it is not supposed to be that way.

I've tried playing with repeat, size, and position on the image and the gradient, along with changing values and using browser prefixes, but have not been able to get it to be the way I want it (one color at the top of the screen transitioning to another color at the bottom, both transparent so the background shows through). I've done stuff similar to this before, but never had this issue.

Here is the code pen I've been working on: http://codepen.io/KitPepperwig/pen/pvrBrY