Auto-stretch Header Background

[woodscooter]

I have had some success with doing this. I'll describe what steps I took, and you may find that you can adapt it to match exactly what you want.

There's some template editing. I recommend you don't edit the default templates.

Start off with the image file you want for your banner. Mine was about 180px high and 850px wide. Use the style variable editor to edit Image Paths>titleimage, to tell the software what image to use for the banner.


Edit css-global.css. About line 656, within #header .site-logo, remove the line

max-width:320px;

About line 663, within # header .site-logo img, remove the line

max-width:320px;

Then add to css-additional.css,

#header .site-logo { position:relative; height:180px; width:850px; margin:auto;}
#header .site-logo img {position:absolute; width:850px; margin:auto;}

That's about it, really. I get a full-width banner if the page is narrow, and a centred banner with equal margins if the page is wide. It's not exactly what you are asking for, but it will take you a good way towards it.