Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Header Image & Fluid Width Question


  #1  
Old May 26, 2010, 02:15 PM
Tammy
 
14 posts · Jul 2009
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?
  #2  
Old May 26, 2010, 07:35 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old May 27, 2010, 01:00 PM
Tammy
 
14 posts · Jul 2009
I don't understand the point of a theme being fluid if the images do not resize. It's not really fluid then.
  #4  
Old May 27, 2010, 01:15 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old May 27, 2010, 02:42 PM
Tammy
 
14 posts · Jul 2009
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.
  #6  
Old May 27, 2010, 03:29 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I would love to see your fluid width site to see it in action.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 27, 2010, 05:41 PM
Tammy
 
14 posts · Jul 2009
Extraordinary in the Ordinary
  #8  
Old May 27, 2010, 06:58 PM
juggledad's Avatar
juggledad
 
23,630 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
clever idea replacing the %image with
HTML Code:
<img src="http://yourdomain.com/wp-content/themes/atahualpa351/images/header/IMG_1496.jpg" width="100%" />
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old May 27, 2010, 07:14 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Thanks Tammy... That opens up new ideas. This just show we should ALWAYS be learning.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old May 27, 2010, 07:23 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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 {
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 (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; May 27, 2010 at 07:39 PM. Reason: Additional Info
  #11  
Old May 28, 2010, 04:54 AM
juggledad's Avatar
juggledad
 
23,630 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;">
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old May 28, 2010, 05:13 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I just left the %image as is and added the CSS. See at my test site.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 28, 2010, 05:23 AM
juggledad's Avatar
juggledad
 
23,630 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 28, 2010 at 05:29 AM.
  #14  
Old May 28, 2010, 05:53 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old May 29, 2010, 07:10 PM
AaronD
 
4 posts · May 2010
Quote:
Originally Posted by Tammy
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
  #16  
Old May 29, 2010, 09:32 PM
Tammy
 
14 posts · Jul 2009
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.
  #17  
Old May 29, 2010, 10:23 PM
AaronD
 
4 posts · May 2010
Quote:
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) :

Code:
%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.
  #18  
Old May 29, 2010, 11:11 PM
Tammy
 
14 posts · Jul 2009
Aaron, are you changing the code to reflect your domain name and the location of your header image?
  #19  
Old May 30, 2010, 06:14 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old May 30, 2010, 09:53 AM
AaronD
 
4 posts · May 2010
Thank you for the replies. I really appreciate the help and direction.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu bar buttons the same flexible width like fluid layout Tigger Page & Category Menu Bars 6 May 14, 2011 12:58 PM
[SOLVED] A Fixed-Width Center Column with Fluid Layout seleniumgirl Center area post/pages 2 Apr 22, 2010 09:13 AM
Is a "fluid" Header image possible? agentc0re Header configuration & styling 3 Feb 3, 2010 02:04 AM
Background image &amp;amp; form in only 1 cell of a header extra widget cell? kippiper Header configuration & styling 8 Nov 22, 2009 06:58 AM
Multiple image header with different alignments for fluid width? haenchensd Header configuration & styling 1 Aug 8, 2009 05:28 AM


All times are GMT -6. The time now is 01:26 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.