Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Fluid Resizing of %Image Area in header


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jun 11, 2011, 10:11 PM
awcguy
 
34 posts · Feb 2011
West Virginia
Send a message via AIM to awcguy
Fluid Resizing of %Image Area in header

Please forgive me if the answer is already posted: (if so please provide link)

I am still learning to look at code and stuff..

In CSS3 the usage of background-size is just being recognized by Internet Explorer 9 but I believe that other browsers recognize it.

Surfing through the docs.. and using firebug I did not find the imagecontainer file in the CSS docs.

But in the bfa_header_config.php file: ( I found )

// Header Image
if ( strpos($header_items,'%image') !== FALSE ) {

ob_start();
$bfa_header_images = bfa_rotating_header_images();

echo '<div id="imagecontainer" class="header-image-container" style="background: url(' .
$bfa_header_images[array_rand($bfa_header_images)] . ') ' . $bfa_ata['headerimage_alignment'] .
' no-repeat;">';

if ( $bfa_ata['header_image_clickable'] == "Yes" ) {
echo '<div class="clickable"><a class="divclick" title="';
bloginfo('name'); echo '" href ="' . $homeURL . '/">&nbsp;</a></div>';
}



Can the no-repeat;

be Substituted with background-size: 100%;



Thus concluding we can have a fluid images that rotate?



---- Found some other data: (for other older browsers )
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

Internet Explorer still at IE 9 Support

Last edited by awcguy; Jun 11, 2011 at 10:23 PM. Reason: Added more info
  #2  
Old Jun 12, 2011, 04:22 AM
juggledad's Avatar
juggledad
 
22,263 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
did you try it? What were the results?
What happens in IE8 and IE7?
CHrome?
FireFox
Safari?
Opera?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 12, 2011, 08:08 AM
awcguy
 
34 posts · Feb 2011
West Virginia
Send a message via AIM to awcguy
Juggledad - Fair Question:

Unfortunately - I have not tested this Theory.

My Hope was for you to validate my interpretation of the code provided.

According to Data the Background-size does not render in previous versions of IE besides IE 9.

I also provided the later notes of CSS


I *Believe we are dealing with the div id="imagecontainer" class="header-image-container" , Correct?

----------------------------------------------------------------------------------------------------------
On this thread: http://forum.bytesforall.com/showthr...ntainer&page=3

user: kmesseinger provided -this code..

// Header Image
if ( strpos($header_items,'%image') !== FALSE ) {

ob_start();
$bfa_header_images = bfa_rotating_header_images();

$user_header_image = $bfa_header_images[array_rand($bfa_header_images)];
$user_header_as_array = array_reverse(explode("/", $user_header_image));
$user_header = $user_header_as_array[0];
$user_header_as_array = explode("'", $user_header);
$user_header = $user_header_as_array[0];

if ($user_header == 'myheader1.jpg') { $user_link = '/wp-content/themes/atahualpa366/images/header/myheader1.jpg" alt="" border="0"' width=100%;}
if ($user_header == 'myheader2.jpg') { $user_link = '/wp-content/themes/atahualpa366/images/header/myheader2.jpg" alt="" border="0"' width=100%;}
if ($user_header == 'myheader3.jpg') { $user_link = '/wp-content/themes/atahualpa366/images/header/myheader3.jpg" alt="" border="0"' width=100%;}


echo '<div id="imagecontainer" class="header-image-container" style="background: url(' .
$user_header_image . ') ' . $bfa_ata['headerimage_alignment'] . ' no-repeat;">';

if ($bfa_ata['header_image_clickable'] == "Yes") {
echo '<div class="clickable"><a class="divclick" title="';
bloginfo('name'); echo '" href ="'; bloginfo('url'); echo $user_link ; echo '/">&nbsp;</a></div>';
}


We could use this code adding the width=100% -- to render the changeable by page and fluid resizing of images..

I did not test but looking for code validation..

Last edited by awcguy; Jun 12, 2011 at 08:21 AM. Reason: added more info
  #4  
Old Apr 19, 2012, 01:31 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
I am working on this one as well. Atahualpa Atahualpa 3.7.5 WP 3.3.1 newlayout.tribe-online.de

First we were using images that were too small and left a white border to the left and right.

Now I got new images with a size of 1280x393px which work out fine if I the layout is set to 75% with minimum width to 1280. And height in image settings to 393.

My question is now what happens if somebody with a smaller screen resolution like 1024 or 800 accesses the site, will the logo be cut off for him and will the logo not be too small if shown on a 1080p resolution?

How do you get around this problem?
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg
  #5  
Old Apr 19, 2012, 04:11 AM
juggledad's Avatar
juggledad
 
22,263 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
if you swap to an 800 wide display, a scroll bar appears for both top/bottom and left right - the header image is there, you just have to scroll
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Apr 19, 2012, 04:21 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Thanks man,
I have experimented the last hour, but figured due to the fact that we have a logo-picture that ranges over the full span of the page we would not be able to use a flexible layout. Or is it somehow possible to center the image in the %image box and have another background left and right than what is the center column background.

At the moment I have fixed the layout to 960px which seems to be the most common used width - and matched the picture to that.
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Header Area Widget Table auto resizing holyyakker Sidebars & Widgets 1 Feb 2, 2011 01:42 PM
[SOLVED] Automatic resizing of the header image yiorgos Header configuration & styling 50 Jan 12, 2011 04:59 PM
[SOLVED] Correct CSS to set maximum width of center area, yet retain fluid header ima Wimbledon Center area post/pages 2 Dec 22, 2010 08:36 AM
[SOLVED] Creating a Fluid Image Header TerryEsh Header configuration & styling 2 Oct 13, 2010 06:03 PM
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 08:56 PM.


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