Grow your CSS skills. Land your dream job.

[Solved] Disappearing Background Image

  • # September 17, 2013 at 9:02 am

    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.

    # September 17, 2013 at 9:07 am

    Can’t even load the site on Android Chrome…I get an internal server error.

    # September 17, 2013 at 9:10 am

    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.

    # September 17, 2013 at 9:15 am

    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.

    # September 17, 2013 at 9:16 am

    Also curious as to what this is class=”pc” on the HTML element.

    Is that added by JS?

    # September 17, 2013 at 12:19 pm

    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.

    # September 17, 2013 at 12:49 pm

    Any luck with other options I mentioned before?

    # September 21, 2013 at 8:27 am

    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.

    # September 21, 2013 at 12:00 pm

    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 ;)

    # September 21, 2013 at 12:07 pm

    Did you try it on the body?

    Frankly, I wouldn’t be putting large bg images on mobile anyway.

    # September 21, 2013 at 2:14 pm

    You make a valid point. Perhaps I should just skip it.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".