Zen Cart Logo
Forums / General Questions / Background images for header, body, and footer...

Background images for header, body, and footer...

Locked

Views: 2,231

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
22 Oct 2008, 5:52 AM
#1
95_boyz avatar

95_boyz

New Zenner

Join Date:
Oct 2008
Location:
Laie, Hawaii - Provo, Utah
Posts:
26
Plugin Contributions:
0

Background images for header, body, and footer...

I'm trying to use my Photoshop design for a Zen cart that I have. I want to edit the whole header, the mainwrapper (I think that's where the body of the website is), and the whole footer. When put together, it makes one big design. Anyone know where to point me to editing those sections?

22 Oct 2008, 8:23 AM
#3
gjh42 avatar

gjh42

Black Belt

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

Re: Background images for header, body, and footer...

#mainWrapper is the entire area of the page not counting blank/background space around it, if any.
#contentMainWrapper is the area between the header and the footer.

Assuming your page will be a fixed width and your header and footer will be fixed heights, cut your Photoshop image into sections that fit the header and footer, and apply them as background-images to #headerWrapper and #mainWrapper respectively. (The footer area is made up of two or three separate elements, and using the bottom of #mainWrapper may be easiest.)

The remaining center part of the design will be the background-image for
#contentMainWrapper. This part will have to be able to repeat vertically to fit any height of page content.

#headerWrapper {background-image: url(../images/topbg.gif); background-position: top center; background-repeat: no-repeat;} 

#mainWrapper {background-image: url(../images/bottombg.gif); background-position: bottom center; background-repeat: no-repeat;} 

#contentMainWrapper {background-image: url(../images/middlebg.gif); background-position: top center; background-repeat: repeat-y;}
```There are other possible ways of organizing this as well, and some may be better for certain designs.
22 Oct 2008, 8:33 AM
#4
95_boyz avatar

95_boyz

New Zenner

Join Date:
Oct 2008
Location:
Laie, Hawaii - Provo, Utah
Posts:
26
Plugin Contributions:
0

Re: Background images for header, body, and footer...

Right on to the both of you for all that info. I have my hands full tomorrow but I'll let you guys know how it goes. This is the best forum EVER.. EVA... EVAH... EVAAAAAH!!! LOL