Fluid Logo

[Dan]

Ok style gurus. Probably easy for you, damn near impossible for me . How would I go about making my header image fluid, ie adjust to window and forum size?

You can see here that if you make the browser smaller the logo remains the same. Thanks!!

 

[khurt]

A way to approach this header would be to split it into 3 separate images. (may not be worth the trouble if you don't still have the header in layers in photoshop)

• logo (st louis life) - png format so that you can see through the transparent grey area around the text
• background (st louis skyline) - make this as wide as possible, 1,500 - 2,000px, fade the left/right edges into the background
• grey/white graphic (on the right side in your current logo) - also png format

The idea here is that you set the logo in the same position as the default XenForo logo. It will always appear in the upper left edge of the forum. You then set the background to be the #header background. The grey/white graphic could be placed in a div with a high z-index and absolutely positioned in the upper right corner.

This would give you a header than can stretch with your forum to various widths. The logo will always be in the upper left, the grey/white graphic will always be in the upper right. And the user will see more or less of the background image depending on their monitor resolution.

 

[Carlos]

Is this what you mean? http://xenforo.com/community/threads/beta-logo-height.4895/

Thanks sir.