HTML

Requirements - Full screen image (as a back ground) that scales and will display in any monitor resolution

Solution:

• Online working example
• Straight to the code | Zip file

Notes:

Background image for content – I have used a PNG image for the back ground – The PNG will render correctly in IE 8, FireFox 3, Chrome, Safari although older versions of IE (say 6) the PNG will come up as a solid color – no biggie. You can apply hacks to it but seeing though those browsers are on the out and only hold about 8% market share you can better spend your time doing other things.

Browsers tested – It pretty much works on all browsers ( put it this way – it even works on IE 4.01)

Layers - You need to think all div’s like a sandwich (if you will) and by using z-index in css you can determine the stacking order. So what ever you want on the bottom (eg the background image) make sure that you set the z-index to something low or negative (the range is -5000 to 5000 – i think) and make sure the content is at least 1 more than that.