resizing an image to fit the page

[deesigner]

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

[calebkester]

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!

[Author]

Posts