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 . '/"> </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 |
did you try it? What were the results?
What happens in IE8 and IE7? CHrome? FireFox Safari? Opera? |
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 '/"> </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.. |
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? |
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
|
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 04:29 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.