iPhone not fully repeating background image

Question

I have built a website that I thought was free from css errors until I test this on the iPhone. I have a strange problem in that the repeating background images do not stretch fully across the page.

This is what it looks like on an iPhone and full website URL: Example website

Answer 1

Try this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The problem is the same for if you reduce the width of your browser. The problem is the background IS stretching, but the website is only as wide as the stretched background image. The slidey bit below the logo has a fixed width though and is creating the illusion that the background isn't stretching far enough.

The above code should fix this issue by making sure that the website zooms to fit the width of the browser.

Answer 2

Turn off auto-scaling by setting a viewport meta tag to the head section of your HTML. This sets the width of your page to match the width of the display,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 3

Sadly adding the viewport to set the zoom to 100% was not what I was looking for.

After debugging further I found that the problem was being caused by the large banner image at the top. This was a larger width than the rest of the website, by changing this to a centered background image and adding overflow hidden to the container fixed all issues.