Background image changing, top and bottom cut off?

I have a bordered page as my background image and want to be able to see the complete page (top and bottom border). Sometimes when I load the page it is perfectly displayed with an aligned banner image. and randomly it cuts off the top and bottom border, or has the border showing quite low on the page cutting through the branding banner. How do I stop this from happening?

I think it's because of the height of the page content area inside the page canvas (this varies depends on how much content you have on a site). I already inspected the footer and it's not blocking the page background. If you add this code to Custom Code > Custom CSS, the entire background image will show up:

I have put the code in. previous to that I had it showing the top border, by making it's position 0%. After inserting code the bottom is still cut off, or if there is alot of text on page it doesn't contine to cover the content.
What can I do to make the image respond to the text?