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,649 posts · Mar 2009
OSX 10.10.1 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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,649 posts · Mar 2009
OSX 10.10.1 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 12:50 PM.


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