• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fluid Logo

Dan

Well-known member
#1
Ok style gurus. Probably easy for you, damn near impossible for me :p. 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

Well-known member
#2
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

Well-known member
#3
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

XenForo moderator
Staff member
#4
An old trick I like to use is a table. For example:

Code:
<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. :eek:
 
#10
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:
Code:
#header
{
    @property "header";
    background-color: @primaryMedium;
    @property "/header";
}
and replace it with something like:
Code:
#header
{
    @property "header";
    background: @primaryMedium url('styles/default/xenforo/stlouis-skyline.png') no-repeat top;
    @property "/header";
}
 

Carlos

Well-known member
#14
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].