Grow your CSS skills. Land your dream job.

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: http://savingcontent.zymichost.com/test.html

    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
    http://www.w3schools.com/css/css_positioning.asp

    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.

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