Suggestions for header redesign

[Bryan Ex]

I like my site for the most part (few programming issues to fix) but ever since the change to wide screen monitors my header has bugged me due to the large empty spaces on either side. It looked fine on the old 3:2 monitors and added extra navigation. Stretching the image dynamically only screws up the fonts and image which probably means starting over on the header idea. Anyone know of some examples I should look at or have suggestions where to go with this next? I do want to keep links to the various sections of my website and don't want a header that is taller than what is there now but I do want to get much closer to the main wrapper table edges regardless of monitor screen ratio.

http://www.sugarbush.info/forums/index.php

- Bryan

[nhawk]

Probably the best way to do it would be to find or create an image larger than today's current screen size. Then put it in a div as the background. Put your menu image in the div over it. Something like...

<div id="page" style="background: url(4.jpg) no-repeat;height:120px;width:100%;text-align:center;vertical-align:bottom;overflow:hidden;">
<img src="menu.png">
</div>


That would show part of the background like in sample1.jpg. And more of the background like in sample2.jpg.

[Bryan Ex]

Thank you! Exactly the type of idea I was hoping for. I'll work on this next snowy weekend. Much appreciated and Happy New Year.

[Bryan Ex]

Interesting... I need to find an image that doesn't have a "centre" to it. I will update this post once I have a finished version for review. nhawk - good job on the example image btw.

[nhawk]

That was this image...

http://westlife.northcoastnow.com/files/2012/02/img_2027.jpg

Trimmed down to 100px tall and the bottom black band added for a total of 120px tall.