Smart Backgrounds support

[gjh42]

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

[welchyboy]

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.

[gjh42]

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.

[welchyboy]

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.

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

[Glendon]

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

[welchyboy]

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?

[gjh42]

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?

[welchyboy]

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

[gjh42]

Glendon -

Your main stylesheet still has

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

which makes the logo space solid white and 145px high. The height is probably ok, but you need to delete the background-color so the header bg can show through. Right now it is only visible in a small strip below #logoWrapper.

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;}