Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Adding Background images to RIGHT and LEFT

Adding Background images to RIGHT and LEFT

Locked

Views: 6,681

Results 1 to 11 of 11
This thread is locked. New replies are disabled.
5 Jun 2009, 9:47 PM
#1
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Adding Background images to RIGHT and LEFT

hello all,

i'm trying to add some tiled BG images to the LEFT and RIGHT of my cart as is set up here:

http://www.naiah.fr/shop/

i understand where to place CSS to add the Flowers like on that site (see bleow):

#flowersleft {
background:url(../images/bg_flowers_left.png);
width:250px;
height:440px;
position:absolute;
left:4%;

}
#flowersright {
background:url(../images/bg_flowers_right.png);
width:250px;
height:440px;
position:absolute;
right:4%;
}

BUT, i cannot figure out where the code is placed to call the CSS.

What PHP file do i need to add the following part to?

<div id="flowersleft"> </div> <div id="flowersright"> </div>

thanks for any help,
-s.

5 Jun 2009, 10:00 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Adding Background images to RIGHT and LEFT

Is that your site? If not, let us have a link to your site.

5 Jun 2009, 10:03 PM
#3
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Re: Adding Background images to RIGHT and LEFT

oh yeah...

http://www.benscycle.net

thanks.

8 Jun 2009, 5:21 PM
#4
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Re: Adding Background images to RIGHT and LEFT

i'm messing with:

tpl_main_page.php

and

html_header.php

but i can't seem to get it working.....

anyone have any ideas?

8 Jun 2009, 6:04 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Adding Background images to RIGHT and LEFT

If I understand the question, you should be able just to specify a background image in the #body section of the stylesheet.

8 Jun 2009, 6:35 PM
#6
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Re: Adding Background images to RIGHT and LEFT

if i wanted a single BG image i could do what you suggest....

but i want an image on the left side BG, and a different image on the right side BG.

i can add the code:

body {
background:url(backgroundimages/bg_left.jpg);
width:250px;
height:440px;
position:absolute;
left:4%;}

body {
background:url(backgroundimages/bg_right.jpg);
width:250px;
height:440px;
position:absolute;
right:4%;

but the css only recognizes the bg_right.jpg, so tiles just that .jpg.

i need to distinguish between right and left .jpgs.......

8 Jun 2009, 8:52 PM
#7
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Adding Background images to RIGHT and LEFT

Maybe check this thread, especially post #21.

http://www.zen-cart.com/forum/showthread.php?t=102274

The site you referenced is just using one big image in the body background, though. You could do the same if you created the image properly.

8 Jun 2009, 9:23 PM
#8
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Re: Adding Background images to RIGHT and LEFT

there are actually 3 background images on the site i referenced...

  1. the main "fade" BG.
  2. the white left flower
  3. the white right flowers

it would be easier if it was one big .jpg, but it's not......on that site it is set up so that the left and right flowers don't get screwed up from resolution to resolution.....

correct?

that's why it's giving me trouble, i'm not sure how to call those left and right .jpgs.

9 Jun 2009, 2:28 PM
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Adding Background images to RIGHT and LEFT

You would put the extra divs just outside #mainWrapper, in tpl_main_page.php. The Naiah site is organized as

<body id="productinfoBody"> <div id="flowersleft"> </div> <div id="flowersright"> </div> <div id="mainWrapper">

using CSS to position the flower divs. To do the same, put your new divs just before the

<div id="mainWrapper"> .

P.S. - I notice you have inserted a bunch of divider categories in your categories menu. The cleaner way to get that would be to install Categories Dressing and use its divider feature; this will avoid "category" links that go to an empty category named "___________" .

15 Jun 2009, 7:18 PM
#10
spectreman avatar

spectreman

New Zenner

Join Date:
May 2006
Posts:
32
Plugin Contributions:
0

Re: Adding Background images to RIGHT and LEFT

thanks,

as soon as i add those extra divs though, i get this error when opening my site:

Parse error: syntax error, unexpected '{' in /home/benscycl/public_html/includes/templates/future_zen/common/tpl_main_page.php on line 1

what did i overlook?

20 Jun 2009, 3:24 AM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Adding Background images to RIGHT and LEFT

Post the relevant section of your tpl_main_page.php, in ```
[php] and [/php]