I have a rendering error in this website which I haven't seen anywhere else. The website renders in all modern browsers and validates fine although I can't figure out why is it not displaying the full background image (see screenshots below). I am using Yahoo CSS Reset and the background image is declared in the body like this:
background: url("back.jpg") #033049;
You can also visit the website: http://xaviesteve.com/
Let me know if I should provide any more details. Any help/hint is appreciated, thank you.
EDIT
I have found very few people reporting this issue around the Internet:
Another SO question: White space showing up on right side of page when background image should extend full length of page Suggested applying
overflow-x:hiddenbut it crops the website.In an iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html No replies
SOLUTION
I've been investigating and trying different ways to solve this and found that adding the background image to the <html> tag fixed the problem. Hope this saves some time to other devs.
Before
body {background:url('images/back.jpg');}
After
html, body {background:url('images/back.jpg');}
