Background Fix Problem

I have been messing with this problem for a couple hours and I'm tired of it so I'm just going to ask for help .

The page I'm working on is hundreds of lines of codes long so I'm just going to simplify it greatly and give you a simulation of my code, lol.

I have a container div and inside of this div are my two content div's: a body div and a footer div, and one div I'll explain later.

<div class="container">
	<div class="bgfix"></div>
	<div class="body"></div>
	<div class="footer"></div>
</div>

Now the body div stretches to the contents of it's inside; the footer div finishes off the gradient of the body div and that's it. This looks good. However, once the body div stretches text beyond the background image (which is a gradient), the part of the div that is just transparent (no repeating background). This is how I want it to be. There is where the "bgfix" class comes in. I'm using the z-index to put "bgfix" behind the "body" and "footer" class. I just want it to stretch for the entirety of the "body" and "footer" class, behind them, so that you can only see it whenever there's that blank space.

The problem is that whenever I set "bgfix" to 100%, it does stretch all the way but it pushes all the text in "body" down with it. I just want bgfix to be able to stretch to the 100% of the page, hiding behind both body and footer, without impacting the text or anything inside of body or footer. What would be the best way to do this?

Sorry for the long, non-nonsensical post. I italicized my question for simplicity since most of my post is a ramble and the italicized part of basically the only thing that matters. People hire me for design, not for my writing skills .