Why is my background image not adjusting?

[callummundine]

Hi Folks,

I am having some trouble with my background image. Especially on iPad and iPhone (or other mobiles).

When i first load the website, the page is zoomed in a little (see link). https://www.dropbox.com/s/t7bafdoor85qlms/photo2.PNG

When i pinch to zoom out and see the whole page, the background image does not resize (see link). https://www.dropbox.com/s/xr7o5ztv1r8bqv0/photo.PNG

Here is a live version of the page http://www.callummundine.com.au/sarah

If anyone could lend some advice it would be great.

Thanks

Cal

[Senff]

Basically it’s because width:100%; is used on that particular DIV. So I suspect that upon loading the site, that div will only take up 100% of the VIEWPORT, not of the SITE.

Since the site is too wide for smaller screens (and since the header contains code that says the site should be loaded at zoom level 1 initially), you won’t see everything at first. However, that div with the 100% width will be set to fill the full width of the screen (which is less than the site width) and then when you zoom out, it keeps that width.

I would suggest to look into responsive solutions, or to try and get rid of that 100% width and see if that solves it.

[Author]

Posts