Grow your CSS skills. Land your dream job.

resizing an image to fit the page

  • # June 2, 2009 at 12:36 am

    I have read your blog article on resizing the image to fit the browser page. You had versions 1 through3. I liked three the best, however I have no idea how to place this small bit of code on my website. I want the body to have an image that sits behind a fixed width, centered website that when the browser is re-sized the body image does what your beach scene does. I would greatly appreciate the css code you developed to do this.

    I checked the page source but only saw your html and no css. I am new at this so if my question seem trite I apologise. I did try numerous things but nothing worked.

    Thank you in advance.
    Dee

    # June 3, 2009 at 12:36 pm

    The css is a linked style. if you see this line in the header:

    Code:

    it means the css is located here: http://css-tricks.com/examples/ImageToBackgroundImage/style.css.

    If you look at the css the part that you want to keep an eye on is this:

    Code:
    .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5000;
    }

    If you have questions on anything let me know. A quick pointer is you notice we have a z-index on this example. The reason for that is to display the image behind the weather-info (which has a z-index of 6000). If you’re having trouble with z-index remember that static styles can’t have a z-index so you need to use something else (http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/).

    Hope that helps!

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