The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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).

    When i pinch to zoom out and see the whole page, the background image does not resize (see link).

    Here is a live version of the page

    If anyone could lend some advice it would be great.



    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed