Smart Backgrounds support

[welchyboy]

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.

You know as crazy as this sounds to me i guess it is the best bet. I figured there was some simple code to get this done but i guess not. So gjh42 I like your idea having the grass fade into a solid green. However how is this going to work. Will it still tile or what. Am I making the actual image larger or what. I understand the part of fading it into a solid color but not sure exactly how this is going to work. I am prepared to try though. My only worry is I want it to look pretty similar or at least good looking on different resolutions

[gjh42]

Get your side edges matched up first so the image can tile horizontally. You will get the best results there if the image is around 700px wide, as the seams will be largely hidden behind the main content.

Make sure the image is tall enough to fill an average monitor's content window (say 700 or 800px), and then only large monitors will have to deal with the grass blending anyway. You will not have any vertical tiling.

In Photoshop (adjust instructions as required for any other program), enlarge the canvas say 100px on the right side, then copy a 100px strip from the left edge and paste it onto the right edge so it meets the original right edge of the image. Work the joint (rubberstamp can be helpful) until it is well concealed. Be sure not to change the right side of the copied strip, only the left. When it looks good, cut the 100px strip from the right and paste it back where it came from on the left, then shrink the canvas back to where it was.

[ozetrade]

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 {

Absolutey right Glenn...thanks mate. :-) Who would think that a single space would cause grief. It all works great now in both IE and FF. I plan to have a dev site up later for my customer to view later tonight if you want to have a look. I'm changing the header and the category title on the left.

Cheers
Greg (ozetrade)

[ozetrade]

I plan to have a dev site up later for my customer to view later tonight if you want to have a look. I'm changing the header and the category title on the left.

This site is now up if anyone who wants to see the possibilities.... A work in progress.

The module is managing the header images and the left side top category image.

http://www.ozetrade.net/imatra/

I'm stoked!!!

OZ

[welchyboy]

Get your side edges matched up first so the image can tile horizontally. You will get the best results there if the image is around 700px wide, as the seams will be largely hidden behind the main content.

Make sure the image is tall enough to fill an average monitor's content window (say 700 or 800px), and then only large monitors will have to deal with the grass blending anyway. You will not have any vertical tiling.

In Photoshop (adjust instructions as required for any other program), enlarge the canvas say 100px on the right side, then copy a 100px strip from the left edge and paste it onto the right edge so it meets the original right edge of the image. Work the joint (rubberstamp can be helpful) until it is well concealed. Be sure not to change the right side of the copied strip, only the left. When it looks good, cut the 100px strip from the right and paste it back where it came from on the left, then shrink the canvas back to where it was.

Now that's what I am talking about taking it slow with the n00b. Really appreciate it. I will work on this and do everything you said and hopefully it comes out looking great. That is what I want though I would like it to look great for 1024 x 768 which to me is the most prevalent. Then for larger resolutions they will see the grass. Thanks a lot and if i have any troubles I will post back. Thanks

[welchyboy]

OK so i edited the background but instead of having it bleed into a solid color I just made more grass at the bottom. I have the width set to like 1024 px and the height to like 1400 px. but I did not stretch the image to 1400 px I just made the canvas height larger and copied the grass. Now the image looks great at 1024 x 768 which i believe is normal. I tested it at 1280 x 1024 which is the highest my home computer goes and it looks pretty good. The grass shows up at this resolution but not at the 1024 x 768 which is what i want. The only problem is I didn't do a very good job at editing the sky portion of the image. I still see seams. I can't figure out how to correctly edit it to get rid of that. I tried following your steps but just didn't get it working the way it should. I don't see any seams in the photoshop image at all. If you could help out a little more I think we might just get this thing figured out at least to where I can be pleased with the look. Thanks again for the patients...EVERYONE who has joined in to help out.

[Sawhorse]

Hi,
I do not know if this possible or not. My Background actually has three files. In my example headerbg.jpg can be found in my layout.css (note that my stylesheet.css calls my layout.css) and topmenubg.gif & topmenubg_login.gif can be found in my common/tpl_main_page.php The total background image is not rectangular. topmenubg.gif & topmenubg_login.gif images switch depending on if the customer is logged in or not. You will note that because the buttons (tabs) are not totally across the page that there is background showing. So, if I am to change images, depending on a particular page (such as the about_us page) then I have three images that I need to change and two of these images (topmenubg.gif & topmenubg_login.gif) are conditional in my tpl_main_page.php (see below)

<?php if ($_SESSION['customer_id']) { 
                        
                        $menubg = 'topmenubg.gif';
                        
              } else {
                if (STORE_STATUS == '0') {
                    
                    $menubg = 'topmenubg_login.gif';
                    
        } } ?>

So my question is can and if so how will Smart Backgrounds work in my somewhat unique situation?

Sawhorse

[gjh42]

You are switching foreground images here. The Smart Backgrounds code can be modified to handle this; see post 104 above for an example.

I would build only part of the filename with your existing code, like

$menubg = 'topmenubg_login';

and then in the smartimg code do something like

$menubg .= $smart_image;



The background image that switches along with these can be handled in the stylesheet as usual.

[gjh42]

<?php if ($_SESSION['customer_id']) { 
                        
                        $menubg = 'topmenubg_';
                        
              } else {
                if (STORE_STATUS == '0') {
                    
                    $menubg = 'topmenubg_login_';
                    
        } } ?>

<?php //Smart Backgrounds - for foreground logo - 20081212
$smart_image = '';
$unique_ezpages = true;//change to false to not have diff bg for each ezpage
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //change filename to $menubg and top cat id only if cat image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?$menubg . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath] . '.gif'):HEADER_LOGO_IMAGE;
} elseif ($current_page_base == 'page' and $unique_ezpages == true) { //change filename to $menubg_page and ez-page id only if ez-page image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . 'page' . $_GET[id] . '.gif'))?$menubg . 'page' . $_GET[id] . '.gif':HEADER_LOGO_IMAGE;
} else { //change filename to $menubg and pagename only if  page image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . $current_page_base . '.gif'))?$menubg . $current_page_base . '.gif':HEADER_LOGO_IMAGE; //default/home page image will be as defined (HEADER_LOGO_IMAGE)
}// /Smart Backgrounds

$menubg .= $smart_image;?>

[Sawhorse]

Glen,
Thanks for the info about post 104.

But your second post is ahead of me. You need to explain. Please!

Sawhorse