Question

How can I have a background image repeat the full length of the page?

Ive applied a repeating background image to the body but by default it only extends down as far as the page’s content.

If I set the body and html to be height 100% with 0 margin and padding, then the background repeats the full height but now scroll bars appear. I can fix this with overflow: hidden; set to body, but im worried about unintended conciseness of this cross device, etc.

Thanks

Answer 1

Have you tried using overflow auto?

http://jsfiddle.net/easwee/hJsnW/4/

html, body {margin:0;padding:0;height:100%;background:url(http://jsfiddle.net/img/top-bg.png) repeat-y 0 0;overflow:auto;}