Grow your CSS skills. Land your dream job.

Why is my background image not adjusting?

  • # April 21, 2013 at 9:31 pm

    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

    # April 21, 2013 at 10:21 pm

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".