Footer Background Image

[ChrisBolton]

I have a background image which I would like to sit behind the footer section of my web page. The image is an illustration which is around 600px high. The detail within the footer itself will only be around 120px high. The footer is not alligned to the bottom on the page, just the bottom of the content. I don't want the illustration to make the browser scroll any more than the footer detail for users with smaller resolutions, I would just like the illustration to be there if the browser is maximized and the user has a big screen resolution.

For example. A user has a viewable height inside the browser of 1000px and the whole content area including footer on a particular is 1100px. The user would only see 120px of the illustration. On another page, the whole content area including the footer is 500px, so the same user would see all of the illustration behind the footer on this page.

I can't use absolute positioning in the body tag as the content is different heights on each page. If I place the background image in the footer div, the image will only display as far as the detail in the footer.

Does anybody know a solution to this, or if it's even possible?

The very kindest regards.
Chris.

[tedster]

I can't think of a simple way to do this. Either the image is truly a background image, and therefore in truncates when the content ends, or the image is not in the background and forces a scroll to the bottom.

I can think of a more complex way -- use javascript and the DOM to overwrite the mark-up of the footer div if the client.availheight is sufficient to display the entire image. You would have to change the mark-up so the image is no longer a background of the footer div but a regular image, given both an absolute position and a z-index lower than the footer div, like -100 or something. Not sure it's worth the coding hassle, but that's the idea.

By the way, absolute position is measured relative to the immediate containing block, which is not always the body element.

[ChrisBolton]

It would have to be in the body CSS though to acheive what I want it to. A background image inside a div can only stretch as far as predefined paramaters or the content, I think. I'm kind of thinking it's not really possible without too much hassle. I might just increase the height of the footer. It's an awesome illustration. It would be a shame not to let people see it!

[tedster]

Maybe forcing the scrollbars is not too bad an idea, then?

I have one site that I created in 1999 that is not all that well coded -- most pages have scrollbars that extend beyond the text content, and on some pages, significantly beyond. The site has been doing very well for years and there's never been one mention of the scrollbars from either a regular visitor or from the business I created it for. I'm thinking that it's not so big a "sin" from a practical post of view.

[ChrisBolton]

Very true. As a designer who's sell is usability, I have never even questioned vertical scrolling. I'm going to do that, you've convinced me.

As always, thanks for the help Tedster.