Background image not displaying full width of header on iphone

[wotnow]

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

[Senff]

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.

[wotnow]

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!

[Senff]

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

[wotnow]

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

[Senff]

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.

[wotnow]

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?

[Author]

Posts