[SOLVED] Problems with CSS 'Header Image' - How to make fluid??

[slimboyfatz32]

Hi all ,

Here we go with my first post .... I have a site i am constructing in XHTML & CSS ...... i have a header and footer image which i want to incorporate into the page , but having problems making them expand etc with the browser window ...the image is 1000px wide as i am designing for users with 1024x768 and above!! Of course this looks fine at 1024x768 it fits perfectly , but of course when i take it back up to 1280x1024 (the res i design in) there is a large gap to the right hand side of my header ...... is there anyway to make the header / footer expand with the window.........help greatly appreciated !!!

PS . I have seen people use a small spacer image before ?!?! how is this done??

[karinne]

What does the image look like? A link to your site would be nice, etc......

[slimboyfatz32]

yes sorry here is a temp link .....

[masonbarge]

For the most part, expanding an image across a range of horizontal resolutions will not turn out well. You'll either stretch the image (if height is constant) or increase the vertical size, making your page heavy and the image HUGE at higher resolutions. Also, allowing html/css to expand or shrink an image will make it look like crap, in most cases.

That said, it isn't so hard to do. Here,
http://www.bigbaer.com/css_tutorials...l.tutorial.htm

I have two possible solutions. Actually, I've been working on two pages today using both solutions, so I can give examples.

First, set the image as a background and allow the page to trim it (overflow:hidden. Check this at various window sizes:
http://collierhills.net/index.php

Second, create the image for 800px width and use the same background color in the image and the section (or a transparent background for the image). Then just let the whitespace flow, either centered or on the right or left.

This rough draft is not even in "first draft" shape; something I'm doing for a friend, but it's at the same url as the one above:
http://collierhills.net/greystone/index.php

If you want to, you can float a second image to the right and generate a fixed height connecting bar between the two. I don't have one to show you right now, but the concept is easy enough to understand if you've ever done, say, a box with rounded corners.

[Monie]

Yeah.. I would do the same way you do

[slimboyfatz32]

thanks for the reply , you have given me some great ideas to work off ...when the header image is a picture image it just makes things that little bit trickier , than say using solid colour ... but i think i've cracked it now !!!