- This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
Viewing 12 posts - 1 through 12 (of 12 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi- I’ve been having trouble with having a full-width background image on my site. Everything works fine in browser, but when you go to mobile, it doesn’t seem to display*. There is supposed to be a full-width background image of clouds, but the background defaults to grey.
I’ve tried numerous things, but I was hoping to perhaps get another’s opinion on what I might be doing wrong.
Here’s a link to the site.
Thanks, Noel
*Tested on an iPod Touch on Mobile Safari and Chrome, as that’s all I have access to.
Can’t even load the site on Android Chrome…I get an internal server error.
Could be that you’ve used an absolutely positioned div rather than just putting putting the bg image on the body or html.
Just guessing at this point.
I see that the html has a bg color
html {
background: #444;
}
It might we worth changing that so something obvious (like red) to see if that is what is being displayed in mobile.
Also curious as to what this is class=”pc” on the HTML element.
Is that added by JS?
Yes, that’s correct. I once was doing some OS detection where icon fonts were loading on PC’s differently than macs, but this is no longer the case. Probably best to remove it at this point.
Any luck with other options I mentioned before?
No. Because the body is collapsed to 0px X 0px due to the absolute div being a direct child, it wont hold the background image.
How would you suggest doing full-width scaleable backgrounds?
-N.
Hm…. I tried the first method of placing the background image on the HTMl element, but that doesn’t show up in iOS either.
I did a test with an iPhone 5, and it worked, but not on an iPod Touch. (Both were running iOS 6.)
Suggestions?
PS Thanks for all the help ;)
Did you try it on the body
?
Frankly, I wouldn’t be putting large bg images on mobile anyway.
You make a valid point. Perhaps I should just skip it.