Header Image in Liquid Layouts--- Please Help

I am making my first liquid layout and I want to use a fixed image for my header and footer. My question is if don't set the image as a background in the div, but put the image in the div with html and in the div add a background to match the banner and footer background would this allow my image to look like it is resizing with the layout? The one thing is what about people that Have a smaller screen that the banner is? My banner is currently 960px same goes for the footer, but thinking about resizing to achieve even number percentages for my columns depending how I code my layout.

If some could help me out it would greatly be appreciated.

Thanks,

Chris

Take a look at the header of this site I'm working on. If you expand and contract the site, you can see it adjust and then stop at the min-width and max-width. Unless you're using IE6, in which case I just made it a static layout.

I took this idea from Transcending CSS by Andy Clarke. Basically, you use a really wide image for the header and then set the overflow to hide.

How about a simple placement of the width attribute in img?

Okay! I am following you guys, just a couple things. What if you are using a wrapper div so the page is centered in the browser and lets say the wrapper is 80% so you can see the background image would still set the image width to 100%? Or set the wrapper to 100% put just set margins up so you can see the background? Also would this image trick work if you set it to the background image of the div and set the width to 100%?

Jameson is your site fixed or liquid? Just trying to determine what way I am going to accomplish this. I am trying to stay with liquid because my site is ran by joomla and there is a php code for joomla where I can make one of the columns collapse if I want it to and I am trying to accomplish that for my image gallery and forum. I don't think you can use fixed layout sizes with collapse columns?????

Thanks for your help thus far!

Chris

Id your wrapper is set to 80% your img is still 100%. THan the image would be 100% of your wrapper. Unless you position the wrapper absolute or something.

Okay Cool! Thanks for the quick reply! I don't know what I am going to do yet about the wrapper do you have any suggestions?

Chris

To do for the wrapper as in what? Are you not sure about the width? Height? How to implement the image? What you mean by suggestions... you want me to suggest on width?

What I mean is what to you suggest me setting the wrap with to in percetage? Like 80%, 100%, etc.


Chris

It's up to what you want and prefer. If you want your site to be full screen... than do so. If you want it smaller and make the percentage smaller.

This site, for example, has the main container (or wrapper) at 100% and it's a liquid design. If that's what you want, than you can follow suit.

It's more of what you want rather than of what people can suggest for you. If you really want me to suggest... I'd go with like 80-95% to give some room for the browser... even though it's going to be a liquid.

I went with 80%..Thanks for the help!

No problem

Take a look at this design.

http://www.oswd.org/design/preview/id/2828

The way they do the header image is quite fascinating.

Here is the code for the logo part


Here is the CSS for it


Very slick. The image size is 1600x192.

The site I showed you is liquid.

Might have to try that sometime... Doesn't the image resolution suffer when it changes sizes?

That's the same thing I was talking about in the site I listed earlier. Of course, you have to have an image where it's ok that you don't see all of it all the time.