Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Background effect that everyone might like help?

Background effect that everyone might like help?

Locked

Views: 1,039

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
27 Jan 2008, 2:09 AM
#1
wlamoreaux avatar

wlamoreaux

New Zenner

Join Date:
Jul 2007
Posts:
42
Plugin Contributions:
0

Background effect that everyone might like help?

Let's say your screen res is 1024x768
and your cart width is 824 wide.

that leaves you with 100px on each side.

if i had 2 images 100px wide and "x" px tall.

I would like to put one image on the left side and one on the right side & keep the background static.

How would i go about doing this?

27 Jan 2008, 7:31 PM
#2
wlamoreaux avatar

wlamoreaux

New Zenner

Join Date:
Jul 2007
Posts:
42
Plugin Contributions:
0

Re: Background effect that everyone might like help?

Dr. Byte where are you at?

27 Jan 2008, 8:26 PM
#3
Kim avatar

Kim

Obaa-san

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

Re: Background effect that everyone might like help?

Add a couple of divs and put your new background images in them ... what are you going to do for thos e folks that have 1600 pixel wide screens?

27 Jan 2008, 8:32 PM
#4
gjh42 avatar

gjh42

Black Belt

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

Re: Background effect that everyone might like help?

And what do you want those with different screens to see? Many people will not have the same monitor you have, so don't make your display work only for yours, make it universally applicable.

There are several ways to accomplish a background image that spreads to either side of the main content, but the best for your situation, since your content is fixed width, would be to make the background images one image file with 824px of blank in the middle, and add it to the body declaration in your stylesheet:

background-image: url(../images/yourbg.gif);
background-position: top center;
background-repeat: repeat-y;

This will leave whatever background-color you have defined for body to show on either side of your images for those with larger monitors, yet not force extra horizontal scrolling on those with smaller monitors. Be aware that anyone with an 800x600 monitor will be forced to scroll horizontally to see every page of your site. If you don't mind annoying them, you can leave the content at 824px; otherwise, you would be well advised to make it something like 750px.

By "static", do you mean that it should stay in position on the screen when the user scrolls up & down? For that, you can use

background-attachment: fixed;

except that IE6 doesn't recognize that property value and will ignore it, letting the bg scroll with the content.