[SOLVED] Header Image & Fluid Width Question
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.
|
|
clever idea replacing the %image with
HTML Code:
<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
HTML Code:
div.header-image-container img { |
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 HTML Code:
<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.
|
Quote:
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. |
Quote:
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) : Code:
%logo %pages %cats |
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.
|
All times are GMT -6. The time now is 01:28 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.