Smart Backgrounds support

You will either need to make the "cornfield" image large enough to cover any possible monitor, or do some blending in Photoshop to make the left edge match the right edge so it can tile horizontally.

If you change the urls and links to relative ones as I showed, you will be able to use/test fully while it is on your server and it will work exactly the same on your client's server without changing code (except the configure files which will have to be edited in any case.)

I just tried the relative path using both
background-image: url(../~stxmill/images/home_page/background.jpg);

and this
background-image: url(../images/home_page/background.jpg);

Neither one displayed the background so i reverted back to how i had it for now. I can make the image larger and that isn't difficult by any means but the larger the image the larger the file size which means longer download time. Thought I could prevent that somehow.

background-image: url(../images/home_page/background.jpg);

This requires that your background.jpg image be in
/includes/templates/your_template/images/home_page/. Is it there? Template images should be in the custom template folders.
It would be easier to drop the /home_page/ subfolder.

Since the page content hides most of the middle of the background, if you match the top (sky) and bottom (grass) from left to right edges and make the bg image say 650px wide, the seam would mostly be hidden anyway.

OK I got the relative path working so my image is now up with the right path...What does this actually do? Are you saying now no matter what my url is it will work. I wasn't following you too much on how i should edit the background and make it only 650px. I understand I can edit the file in photoshop by making the sky and corn similar but how can i only make it 650px and it work for other resolutions? Sorry I think i am following you because if it repeats it will be the same but if you could be a little more specific so i could be sure I am understanding correctly. Thanks for the info on the relative path. Very good instructions. Much appreciated.

Yes, it will work now no matter where the site is installed, without further editing.

Add to the styling so that the background image repeats horizontally (with the edges matching since you have tweaked them in Photoshop), like this:```
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-position: top center;

The "top center" will put the first copy in the middle of the page, with its seams still largely hidden by the 900px wide mainWrapper, and the next copies on left and right making a total width of 1950px before another seam shows.

O.k

you mentioned that i have a fixed logo. my apologies I forgot to remove it. I put it there to make a screen shot.
I have now removed it.

Do you know why the logo appears in a small frame above the body as you can see on the story pages and key stages categories?
They are the only two pages where i have tested the smart background

http://www.blueamigo.co.uk/zencart

Glendon

gjh42:

Yes, it will work now no matter where the site is installed, without further editing.

Add to the styling so that the background image repeats horizontally (with the edges matching since you have tweaked them in Photoshop), like this:```
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-position: top center;

> The "top center" will put the first copy in the middle of the page, with its seams still largely hidden by the 900px wide mainWrapper, and the next copies on left and right making a total width of 1950px before another seam shows.

I have the code in place but still haven't edited the photo in photoshop. Not sure exactly what I am needing to do. Do you just want me to match the sky so the left and the right look the same. But then what about vertical. The page is too small for larger resolutions vertically as well?

Yes, just match the left & right edges. You probably want to do some matching on the grass as well as the sky - see how they look and tweak accordingly.

Hmm... the vertical part is trickier. Obviously you can't tile the image vertically. Probably your best bet is to give the body a background-color that matches the bottom edge of the grass. How tall is the image?

Yeah I will try and mess with it. I just don't get which part the left and right tiles are coming from. They are both different. The image is 640pixels

Glendon -

Your main stylesheet still has```
#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:145px;
}

Next you need toedit the smartbg stylesheet and change```
.smartBG_4 #headerWrapper {background-image: url(../images/smartbg_4.gif);}
.smartBG_15 #headerWrapper {background-image: url(../images/smartbg_15.gif);}
``` to something like```
#headerWrapper { /*this gets used on the home page and everywhere you don't have a custom image*/
    background-color: #ffffff; /*this makes sure the header bg is the color you want - you can delete it if #mainWrapper is the same color you want for your header*/
    background-image: url(../images/your_default_image.gif);
    background-position: top left; /*this can be modified to put the image in any position in the header*/
    background-repeat: no-repeat;
    }
.smartBG_4 #headerWrapper {background: #ffffff url(../images/smartbg_4.gif) top left no-repeat;} /*this is a shorthand version of the above - it does the same things more compactly*/
.smartBG_15 #headerWrapper {background: #ffffff url(../images/smartbg_15.gif) top left no-repeat;}

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

https://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?

Thanks for such a great mod.

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

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.

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

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

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 {

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.

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.

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.

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.

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.