Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / any help with my background image?

any help with my background image?

Locked

Views: 1,040

Results 1 to 7 of 7
This thread is locked. New replies are disabled.
22 Nov 2008, 8:01 AM
#1
1kell avatar

1kell

Zen Follower

Join Date:
Jul 2008
Posts:
151
Plugin Contributions:
0

any help with my background image?

I have my side boxes in the left column with an image.
I am trying to get another image in the background to show through the sideboxes, only repeating down the page one on top of the other.

I have tried all sorts and have this in css at the moment, which is not working:

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

#navColumnOneWrapper {
                     background-image: url(../images/silverstars.PNG);
                     background-repeat: repeat-x;
                     background-color: transparent;
                     }

and

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: transparent;
	background-image: url(../images/sidebox.png);
	padding: 0.0em 0.0em;
                     	}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 0px solid #518240;
	margin-top: 1.5em;
                     	}

.sideBoxContent {
	background-color: transparent;
                     padding-top: 0.5em;
	padding-left: 3.5em;
                     background-image: url(../images/sidebox.png);
	}

Any one know what I'm doing wrong?:lamo:

23 Nov 2008, 2:15 AM
#2
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,621
Plugin Contributions:
0

Re: any help with my background image?

Your URL? It is very difficult to figure out without seeing what is happening.

23 Nov 2008, 8:52 PM
#3
1kell avatar

1kell

Zen Follower

Join Date:
Jul 2008
Posts:
151
Plugin Contributions:
0

Re: any help with my background image?

Okay, my site in progress is here. I have taken the background down at the moment as it looked ridiculous.

23 Nov 2008, 9:35 PM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: any help with my background image?

You have got to pay attention to case as these are different and one is found and the other is not(space mine)

http ://www.miraclebaby.co.nz/estore/includes/templates/classic/images/sidebox.PNG
http ://www.miraclebaby.co.nz/estore/includes/templates/classic/images/sidebox.png
24 Nov 2008, 9:43 AM
#5
1kell avatar

1kell

Zen Follower

Join Date:
Jul 2008
Posts:
151
Plugin Contributions:
0

Re: any help with my background image?

I have made progress...finally just got it to repeat going down the left hand side only. However if you have a look you will see the problem right away. I need the silver star images to show through - be transparent. Can it be done?

This is the code so far

#navColumnOneWrapper {
background-image: url(../images/silverstars.PNG);
background-repeat: repeat-y;
display: inline;
float: left;
}

And site is here. Please - I am so close!

25 Nov 2008, 6:34 AM
#6
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: any help with my background image?

Why are you padding the sideboxes?
This is moving them 35px to the right
Also is sidebox.PNG a semi transparent image?
You can set the opacity of images in most editors

.sideBoxContent {
	color: #ffffff;
                     padding-top: 0.5em;
	padding-left: 3.5em;
                     background-image: url(../images/sidebox.PNG);
	}
25 Nov 2008, 8:12 AM
#7
gjh42 avatar

gjh42

Black Belt

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

Re: any help with my background image?

The stars in #navColumnOneWrapper are behind the individual sideboxes, so it is the sidebox bg you want transparent, not the stars.

Since the sidebox bg's are so close to white at the left edge, you could cut them off just enough to clear the stars and position them at the right edge of the sideboxes, or else erase the white at the left edge and leave a transparent strip. The white background would show through behind the stars (or is it part of the stars bg image?)