Forums

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

Home Forums CSS Background image not displaying full width of header on iphone

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #39519
    wotnow
    Member

    Hi everyone, this is driving me nuts. I have the site displaying well on a computer but for some reason on the iphone the header background image does not display the full width of the screen. I have tried everything, I think, lol well except for the thing that will fix it. And for some really obscure reason it is worse on the home page, despite that the html for header and the css are the same for every page. There is an “s” at the end of settlements which displays quite clearly on the computer but not on the iphone. I would be eternally grateful if some-one could add some insight to this problem or better yet fix it lol.

    Link to site

    #108480
    Senff
    Participant

    Since your site loads default pretty zoomed in, that is how iPhone/iPad will initially define the visible area as “100%”, and assign the background image to that area.

    You can probably solve it by assigning the background image to the BODY (instead of the header), or you could set the initial zoom to 1 (so that it doesn’t zoom in) by adding this in the HEAD:

    Give that a try!

    EDIT: I see you already used that META line, I think the semicolon you have in there should be replaced by a comma.

    #108504
    wotnow
    Member

    Hi thanks for trying, I really appreciate it, despite the edit making no difference. I would never have picked that up. I had even forgotten I tried that which is the reason that the background image displays differently on the home page versus the other pages. I am trying to delve into responsive design and wondered whether I made the background image smaller and then called for it only if a mobile device was being used but I got sooo confused. Anyway thanks once again!

    #108505
    Senff
    Participant

    Background image is still on the header, did you try it on the BODY?

    #108510
    wotnow
    Member

    Hi At the risk of sounding stupid, because I obviously don’t understand what you mean, why would I tile the background image of the header across the body? Thanks

    #108514
    Senff
    Participant

    You might want to try it because the header (which is set at 100%) is only a small part of the page upon initial zoom (which SHOULD be 1, but doesn’t work for some reason?).

    So the background will only be placed on the width of the header that is visible when you load the page.

    If you put it on the body (with repeat: repeat-x) it may be applied to the width of the entire page, not just the part of the header that is initially visible.

    #108525
    wotnow
    Member

    Hi .. thanks so much for your support with this. You are awesomely clever, it fixed the background image on the header but the “s” is still not displaying and now I have the same problem with the bg image for the navigation and I cant display two bg images on the body tag. The home page is worse. I have seen this effect of 100% width many times on websites why is it so problematic for iphones?

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