Smart Backgrounds support

[welchyboy]

Anybody know how to fix the background to where it stretches to fit larger resolutions. Or a way to have it edited and displayed as gjh42 says to do. Just need a little more information to get it to work correctly. I already have it implemented on the site...

www.wpc-consulting.com/~stxmill/


If you take a look it will look with 1024 x 768 resolution it should look fine but anything larger than that and specially if you have a wide screen monitor you will see that the left and right portion of the background is different. How do i need to edit that in photoshop to look like all one image. Or is there a better way to set it up so my image will appear full screen on small resolutions and large ones?

[ozetrade]

Thanks for such a great mod.

After reading through the forum, I finally worked out how to get it working. Good Stuff!!

Is it possible to use this mod to manage two BG images on the one page? If so, how's it done?

I'd like two manage my header BG image as per std install, and another BG image using CSS absolute positioning on the same page.

Thanks OZ.

[ozetrade]

As mentioned above, I was able to get the smart BG module working (v2) as I wanted for the header area of my site, but now I'm trying to use the same mod to place another BG image on the same page in a CSS positioned DIV. To do this I'm reusing the same code that normally goes in the tpl_main_page.php, in the tpl_header.php file, but renaming the variables from smart to cat to avoid conflict.

This is the code in tpl_header.php

<?php //Smart Backgrounds
$cat_image = '';
$unique_ezpages = false;//change to false to not have diff bg for each ezpage
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $cat_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.jpg'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} elseif ($current_page_base == 'page' and $unique_ezpages == true) { //add _page and ez-page id to bg filename only if cat bg image exists
  $cat_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg_page' . $_GET[id] . '.jpg'))?'_page' . $_GET[id]:'';
} else { //add _ and page base to bg filename only if page bg image exists
  $cat_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg_' . $current_page_base . '.jpg'))?'_' . $current_page_base:''; //default/home page class will be just .smartBG, and filename smartbg.gif
}// /Smart Backgrounds?>
            
            <div id="cell_3_3" class="catBG<?php echo $cat_image;?>>
            </div>

and this is the content of stylesheet_catBG.css

#cell_3_3 {background-image:url(../images/catbg_index.jpg); position: absolute; left: 0px; top: 80px; width: 99px; height: 354px; }
/*MX category */
.catBG_34  #cell_3_3 { background-image: url(../images/catbg_34.jpg); position: absolute; left: 0px; top: 80px; width: 99px; height: 354px;} 
/*SnowMobile Category */
.catBG_35  #cell_3_3 { background-image: url(../images/catbg_35.jpg); position: absolute; left: 0px; top: 80px; width: 99px; height: 354px;}

The #cell_3_3 {background-image:..........
correctly places the image on the page, but the other images aren't presented when you change categories.

The only code I can see that is different to my working version is the div line in tpl_header.php

<div id="cell_3_3" class="catBG<?php echo $cat_image;?>>

I'm developing offline, but I'm prepared to upload for assessment if needed.

Any help greatly appreciated.
OZ

[ozetrade]

continuing from above..

I did find one error in the code. I have changed

<div id="cell_3_3" class="catBG<?php echo $cat_image;?>>

TO THIS

<div id="cell_3_3" class="catBG<?php echo $cat_image;?>">

....closed the quotes.

I can also confirm that the page creation is producinting the right classes eg

<div id="cell_3_3" class="catBG_35"> 

[gjh42]

Welchyboy -
I don't have a wider monitor to look at your site, but Photoshop editing to match image edges for tiling is probably a subject to google for if you don't already know what is intended.

Ozetrade -
You are showing things like

.catBG_34 #cell_3_3 {

in your stylesheet. This means the element with id #cell_3_3 inside the element with class .catBG_34; but what you have is one element with both class .catBG_34 and id #cell_3_3. You would write that in CSS as

#cell_3_3.catBG_34 {

or

.catBG_34#cell_3_3 {

[welchyboy]

What about being able to have multiple background images for different resolutions and have javascript detect the screen size and display that particular background. Like this code here..that i found.

<SCRIPT LANGUAGE="JavaScript1.2">


<!-- Begin
if (screen.height >= 768 && screen.width >= 1024) { document.write("<BODY BACKGROUND = 'images/1024.jpg'>"); }
else { if (screen.height == 600 && screen.width == 800) { document.write("<BODY BACKGROUND = 'images/800.jpg' >"); }
else { document.write("<BODY BACKGROUND = 'images/1024.jpg'>");
}
}
// End -->
</script>

The problem is how can i do this in zen cart. Where would i put this particular code so that it will go through the entire site? Will this type of thing work for zen cart? I think this is the best and easiest bet if it will work. Please let me know. I don't mean to turn your ideas down gjh42 I just think it will be difficult to edit my current image. Seeings how the top and bottom are completely different and they need to be in that particular position.

[gjh42]

Someone else will have to advise you on javascript. You may want to post this as a separate thread appropriately titled so those who know will see it.

[Kim]

welchyboy-

If you are talking about the cornfield background, my best advice would be to work on the image so that it can repeat horizontally seemlessly, then I would work on the sky so that it fade into a solid color and I would position the image at the bottom of the window with the matching sky color at the top.

[welchyboy]

I have messed with getting it to work seamlessly a *little* horizontally and I know i can get it looking good but my probably is vertically. I understand what you are saying to get the sky to fade into a solid color and that is fine but what are you talking about at the bottom on the page. I don't want sky at the bottom of the page.

[gjh42]

If you position the background cornfield at the bottom of the page, there will be no background color showing below it in any monitors, and only above in large monitors.

background-position: bottom center;

In spite of the fact that it would be easier to get a good result by blending the sky into a blue background-color, you might want to position the image at the top center and fade/blur the bottom of the grass into a solid green background-color, because the bottom of the page is less prominent than the top and I think you would want to control the exact appearance of the top of the screen most.