How should the html `height` and the `body’s` `background-image` be handled? [migrated]

I don't know how to better summerize the question, but here's the problem. I set my html's height to 100% as sugested by Kevin Powell and other people's best practices so things like the footer and such use the whitespace and stick to the bottom of the page, however it presents the problem that if I want to give my body tag a background-image and the current page is "taller" than the viewport the image will start to repeat every 100% of the viewport, i.e the 100% set by the html tag, wich is not always the desired outcome. How should I handle this, not to use background-image on my body tag? use a better tiling background-image?

P.S I don't want to resort to having to wrap all my page's content on a wrapper div inside the body tag... unless well it's the only solution. The body tag has min-height of 100% I'm curently on firefox.