I don't know how to better summarize the question, but here's the problem. I set my html's height to 100% as suggested by Kevin Powell and other peoples 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, which 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 currently on Firefox.

CodePudding user response：

I think it is easily solvable by using

background-size: cover;

source