Menu
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:hidden but 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');}
942
Open the Safari app and open a new tab. Scroll down to the bottom of the tab — past your favorites, shared articles, reading list — and tap on the “Edit” button centered at the bottom of the screen. At the bottom of the customizations list, tap the “Background Image” slider to enable it.
Open Safari on iPhone running iOS 15 or later and tap Edit from the start page. Turn on Background Image. Apple includes preset background images. Tap to use one.
Moving the styling to the html element works fine, but there are other ways of fixing this.
What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.
You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.
An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:
<meta name = "viewport" content = "width = 1080">
More info at Apple's Developer Docs.
124
Just ran into this problem and fixed it by setting all content that uses width:100%; to also have min-width set larger than the width of your content divs. FOr example:
.content_bg{width:100%; min-width:1080px;}
I also fixed it on mobile devices using media queries: for iPhone and iPad:
/*ipad portrait*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
body{width:1080px;}
}
/*ipad landscape*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
body{width:1080px;}
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
body{width:1080px;}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
