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

Getting specific images to stick with background on resize

  • # August 16, 2010 at 1:08 pm

    I’m very new to CSS, I’ve only designed webpages in HTML back in the late 90’s and early 2000’s.

    So now I have static background. And I’ve placed images and things in specific places.

    However, when you resize the browser or in a different resolution than I designed this in (1680×1050), the images are off-center or not aligned to the left portion of the grey background.

    View here:

    Is there a way to get specific images to stick with the left side of the background as it resizes so there isn’t the issue you see on the page?

    # August 16, 2010 at 1:35 pm

    That is because you are using position: fixed. Read this on css positioning

    To get your background images to stay centered you will need to put all the elements of your site, e.g. header, navigation, content, footer, into a containing div say #wrapper, give it the width of your site and position center by using margin: 0 auto; Then you can attach the background images to their corresponding divs.

    # August 16, 2010 at 5:56 pm

    I finally got it resolved, thank for the tips! Quick response and great community.

    (You can see the result on the same page I reported as having a problem)

Viewing 3 posts - 1 through 3 (of 3 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