I'm having trouble with my header image. I want a fluid width and am having trouble with my header image cooperating. If I set my width for 99%, it all looks great on my new wide monitor, but when I go to check it out on our older monitor, it cuts it off and does not show the whole banner (width wise). Any suggestions on what I am doing wrong?

Viewing on a smaller monitor would cut off the image. The image does not resize to fit the size of your monitor you just won't see it all. The only way you can be assured of how much of the banner is visible is the set a fixed width.

I don't understand the point of a theme being fluid if the images do not resize. It's not really fluid then.

That's why I don't use fluid themes. It throws off your image alignments, layout etc. unless you carefully design with that in mind.

Well, to me, the true definition of a fluid them would be one that is fluid from top to bottom including any images. If not, you're right, you should go with fixed. I have a website, not wordpress, and it is a true fluid site. That is what threw me off with this. I searched high and low and could not find any tips for this at all. I'm not sure if this is standard with all wordpress themes or not. I did figure out a workaround for it, though, so now I seem to have my header (not the rotating header) resizing properly.

I would love to see your fluid width site to see it in action.

Extraordinary in the Ordinary

clever idea replacing the %image with

<img src="http://yourdomain.com/wp-content/themes/atahualpa351/images/header/IMG_1496.jpg" width="100%" />

Thanks Tammy... That opens up new ideas. This just show we should ALWAYS be learning.

I just tried something and it re-sizes header images even with fading turned on. Add the following to CSS Inserts

div.header-image-container img {
width:100%;
height:100%;
}

If you leave the height blank the image will re-size and retain the aspect ratio instead of squeezing and stretching the image.

Larry,
were you doing this with the %image or had you replaced that?? When using the %image, there is no <img.. > built, the image is part of the <div...> as a background style

<div id="imagecontainer" class="header-image-container" style="background: url('http://mydomain.com/wp-content/themes/atahualpa346/images/header/100_4173.jpg') top center no-repeat;">

I just left the %image as is and added the CSS. See at my test site.

Ok, I see now what is happening. It works because of the JAVA script, you are actually resizing the java images, not the original background image. If you set 'Rotate header images with Javascript?' to 0 this does not work.

And it was still problematic because of the aspect ratio. You either had to live with "stretchy" image or have the height get shorter. I think designing the header image to allow for being cut off works the best for fluid width.

Originally Posted by Tammy

Extraordinary in the Ordinary

Tammy, can you explain how you did that with the header? I'm impressed. The header re-sizes itself depending on the window size.

I'm working on GHSNC.org and trying to figure out how to do that with my header.

Using Atahualpa 3.5.1, WP 2.9.2

Thanks, everyone. I'm glad it's something that others will find useful, too.

Aaron, I went to the theme options and put this in the configure header area:

<img src="http://yourdomain.com/wp-content/themes/atahualpa349/images/header/yourimage.gif" width="100%">

instead of %image.

Originally Posted by Tammy

Thanks, everyone. I'm glad it's something that others will find useful, too.

Aaron, I went to the theme options and put this in the configure header area:

<img src="http://yourdomain.com/wp-content/themes/atahualpa349/images/header/yourimage.gif" width="100%">

instead of %image.

Thanks for the reply, Tammy.

I am not quite sure what you did though. I went to my Configure Header Area, and the code I have at the moment is (emphasis added) :

%logo %pages %cats
<!-- To remove the ad OR HEADER PHOTO altogether, start removing here... --> 
<div style="position:absolute;top:30px;right:0px;width:100%;">
<!-- Put the ad code BELOW this (and remove the sample text if there is any) -->
%image 
<!-- Put the ad code ABOVE this -->
</div>
<!-- End removing the ad here -->

If I replace the part in red with your code snippet, the header image disappears entirely.

Aaron, are you changing the code to reflect your domain name and the location of your header image?

AaronD... The theme settings you are using includeds a background image for the gray stripes that gives the illusion the menu bar spans the whole page. Because of that you can't use a dynamically resizing image in the header. You would need to use and of the other three themes settings.

Thank you for the replies. I really appreciate the help and direction.