Really Wide Background Image Header Banner with CSS

This is an example of a really wide background header image banner as documented in my "Wide background image header with CSS" post.

The photograph is 3072 pixels wide so is going to fit a really big monitor and most users will only see a small percentage of the full image.

If you resize your browser window note how the top image will reveal more and remain centered. The bottom image will do the same but is left aligned so more will reveal to the right.

I've just made the background black so if you're on a multiple monitor setup you may be able to make the browser window wide enough to see the black background.

The photo is of Rangitoto Island in Auckland, New Zealand.

You could then put a second/third/etc div inside the header/footer, position them where you need and put navigational elements etc in place over the top of the image.