Can I have 2 background images?

**touchclothing** · 9 Dec 2009, 12:18 AM

I wanted to see if I could have 2 background images I tried to do it in a CSS3 way

Code:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #666666;
	background-image: url(../images/backtop.png), url(../images/backgroundimage.jpg);
	background-position:top center; 
	background-repeat: no-repeat, repeat-y;
	}

and it only shows up on the newest verison of safari but not in firefox or IE then I

then I tried it another way and none of the backgrounds show up

Code:

html {
	    background: #000 url(../images/backgroundimage.jpg);
	}

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #666666;
	background-image: url(../images/backtop.png);
	background-position:top center; 
	background-repeat:repeat-y;
	}

Can some one show me how to do this in zencart so it will show up on all browsers?

**DeeLite** · 9 Dec 2009, 05:47 AM

set up your body with the main background.

then create a div that contains your second background.

example

Code:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	background-color: #990000;
	font-size: 11px;
	padding: 0px;
	background-image: url(../images/bg1.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
	}

#layout {
	background-color: #FF0000;
	background-image: url(../images/bg2.jpg);
	background-repeat: repeat-x;
	width: 900px;
}

Your html would be:

Code:

<body>

<div id="layout">content goes here content goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes here</div>

</body>

**gjh42** · 9 Dec 2009, 09:50 AM

Note: if you have a background-color in #layout, it will cover the background in body (at least to the width of #layout). The upper layers need transparent backgrounds with partial-coverage images.

If your site is 100% width, you can use body and #mainWrapper. This is a standard method with existing elements.