Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Fluid Resizing of %Image Area in header (http://forum.bytesforall.com/showthread.php?t=14598)

awcguy Jun 11, 2011 10:11 PM

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

juggledad Jun 12, 2011 04:22 AM

did you try it? What were the results?
What happens in IE8 and IE7?
CHrome?
FireFox
Safari?
Opera?

awcguy Jun 12, 2011 08:08 AM

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..

Hody Apr 19, 2012 01:31 AM

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?

juggledad Apr 19, 2012 04:11 AM

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

Hody Apr 19, 2012 04:21 AM

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.


All times are GMT -6. The time now is 06:47 AM.

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