Problem with full-width footer with repeating background

Hey everyone.
Im looking for a little help with a site im working on.

I’m trying to have a background image repeat as the footer of the webpage. I tried it as a positioned, repeating background image but it wouldn’t go below the top of the wrapper.

So I put a footer on the bottom, with a little sheep.png on it. Full-page its exactly how I want it to look.

But those with smaller resolutions will run into the footer overlapping the text in the scrolling content box.

Any thoughts on how I can prevent this? Tried a few different ways with little success.

Appreciate any help I can get 🙂