Make gradient background pattern fill width of div and repeat vertically automatically

I'm trying to modify a code that I got from this CSS3 Pattern Gallery. The modification I'm trying to achieve is for the background tiles to be resized according to the div size. It's for a lazy loading feature where I want the background to always contain the div it's contained in, no matter what size the div is (regardless of if the width is measured in px or %).

I want the squares of the grid to be filled by 5% of the div width, which is easy. In that way the background pattern will never be cut by the width of the div, since it's always filling the tiles of the pattern by 5% across the div.

But I also want the height of the squares to have the same measurements as the tile's width, in order to make it a square pattern. I'm fine with the tiles being cut on the vertical, as long as the tiles are not cut on the horizontal. And that's what I'm having trouble with. For now, I tried to put auto to the height of the background-size. But that isn't working, obviously.

Does anyone have any idea of how to work this out? Maybe it's achievable through SASS variables?

JSFiddle of the current stage I'm in now: http://ift.tt/2bls6CQ