As a rule of thumb you should not apply any rules to the html element apart from removing margin and padding. When you apply a background image to the body it gets propagated to the html element anyway. The problem in your case is that you have set the html element to 100% for your sticky footer which means that the image will only stretch as far as the initial viewport. It will not continue when content scrolls because the html element is only 100% high and no bigger.
The 1px red border is applied to html.... As you can see, at some point html/body becomes smaller than my container div inside, causing things to mess up
I didn't think that was possible?