Auto-stretch Header Background

[Filt3r]

Hi Everyone,

I have a header background that currently takes up 2/3 of the available space. I would like for it to automatically stretch to the entirety of the available space.

I was expecting to see an img src in the header template that I could set to have a width of 100% but I've not been able to find it.

Could someone help me find the easiest way to do this?

Thanks in advance

[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.

[billstelling]

All of it can be done in additional css. It depends on the style and version of vB to do it that way. You can also set the parameters for it in the stylevars. It all depends on what you are more comfortable working with.