background image 100% width 100% height

*Jeff* · 01-11-2009, 04:56 PM

I'm wanting a background image that includes a top gradient and bottom gradient so I'm looking to stretch the background image to 100% height and 100% width.

http://webdesign.about.com/od/css3/f/blfaqbgsize.htm works quite well except I'm getting some oddity from IE6 even with the exception for it (no vertical scroll bar sometimes, etc... not sure if it matters any longer, but I suspect there are still enough holdouts that it does) and it makes editing in dreamweaver a bit annoying in that the full screen image is always at the top so you have to scroll down one screen on each page in dreamweaver to edit.

Anyone have some alternate methods that work well for stretching the page background image to 100% width 100% height?

*johnfl68* · 01-11-2009, 06:39 PM

I would take the approach of using a tall thin gradient that repeats horizontally, with the background color being set the same as the bottom of the gradient. For pages that are tall, they just have extra of the background color at the bottom.

Or possibly adding a bottom Layer with the bottom gradient as a background to the layer, that floats with your bottom content?

That's what comes to mind right now.

John

*Jeff* · 01-11-2009, 07:51 PM

Thanks John!

The idea of floating a layer at the bottom works great except that I can't figure out how to float it at the very bottom if the browser is larger than a short page AND float it at the bottom if the content is larger than a smaller browser window. Any ideas?

Here is my first attempt at this:
http://islanddesign.com/aota/layer.html

*Jeff* · 01-12-2009, 02:28 AM

Sorry - think I got it.

Simply position: fixed for the footer div seems to work in IE, Firefox, and Opera... for some reason Dreamweaver CS3 itself only shows it correctly behind the content layer if position is set to absolute, but then the browsers won't keep it at the bottom when the content is long enough to scroll.

*Jeff* · 01-12-2009, 02:35 AM

Ah... it appears IE6 actually presents the positon: fixed pagefooter like Dreamwever CS3 (300 pixels of div under the content vs. behind it) but that's probably an ok way to degrade. IE7, Firefox 3, and Opera 9 all show it behind the content with positon: fixed so that looks like a simple winner.

*johnfl68* · 01-13-2009, 12:39 PM

Glad I could help point you in the right direction!

John