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!!

 

[Peggy]

You usually have to slice the logo image and code it to expand with the forum. However I don't see how your logo can be sliced anywhere.

 

[Dan]

Although probably not correct, it does stretch and condense rather well if I could only get it to behave at a percentage and not a px.

 

[Jake Bunce]

An old trick I like to use is a table. For example:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="200">
		<img src="path/to/leftpiece.gif" alt="" border="0" />
	</td>
	<td background="path/to/righttile.gif">
		&nbsp;
	</td>
</tr>
</table>

This only works if your image is such that you can slice it into two pieces, where one piece repeats in a tile pattern. The tile piece fills space, while the fixed piece remains constant.

But don't let Kier see you using tables.

 

[Peggy]

That's what I've always used.

 

[Dan]

Oh course! Thanks Jake! We'll keep this between you and I, eh?

 

[Peggy]

and me......

 

[Dan]

and me......

right! we'll never tell

 

[Peggy]

My lips are zipped!

 

[khurt]

If you want to split your header image into a 2 separate images, you might look into setting a background image for #header.

In the template "header.css" find:

#header
{
    @property "header";
    background-color: @primaryMedium;
    @property "/header";
}

and replace it with something like:

#header
{
    @property "header";
    background: @primaryMedium url('styles/default/xenforo/stlouis-skyline.png') no-repeat top;
    @property "/header";
}

 

[Dan]

Works well. Thanks!

 

[Peggy]

Works well. Thanks!

Which method did you use?

 

[Dan]

khurt's method. So Kier won't get mad at me

 

[Carlos]

You usually have to slice the logo image and code it to expand with the forum. However I don't see how your logo can be sliced anywhere.

I see where he's coming from though. Xenforo forces images to be resized to xenforo's image standards.

I have a big logo, and it gets resized to acceptable level [on xenforo's part].

 

[Peggy]

khurt's method. So Kier won't get mad at me

lol he wouldn't.

 

[Peggy]

I see where he's coming from though. Xenforo forces images to be resized to xenforo's image standards.

I have a big logo, and it gets resized to acceptable level [on xenforo's part].

It shouldn't if you change the size attributes?

 

[Dan]

lol he wouldn't.

I know. Just being silly. I should note by using the method I used, I had to remove the <img src> out of the header template. FYI for anybody else using this method.

 

[Peggy]

I know. Just being silly. I should note by using the method I used, I had to remove the <img src> out of the header template. FYI for anybody else using this method.

Thanks for the tip.

 

[Carlos]

It shouldn't if you change the size attributes?

When I did, it only expands the size navigation, that's it.

 

[yoghurtfarmer]

When I did, it only expands the size navigation, that's it.

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