Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Disappearing Background Image

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #150315
    Noel Forte
    Participant

    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.

    #150316
    Paulie_D
    Member

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

    #150319
    Paulie_D
    Member

    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.

    #150320
    Paulie_D
    Member

    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.

    #150321
    Paulie_D
    Member

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

    Is that added by JS?

    #150344
    Noel Forte
    Participant

    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.

    #150347
    Paulie_D
    Member

    Any luck with other options I mentioned before?

    #150852
    Noel Forte
    Participant

    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.

    #150855
    Paulie_D
    Member
    #150885
    Noel Forte
    Participant

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

    #150887
    Paulie_D
    Member

    Did you try it on the body?

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

    #150888
    Noel Forte
    Participant

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.