CSS Sprites

[smoke133]

How do you add a css sprites image in zencart for the background images?

[Website Rob]

I would image the same way you would for any similar type image.

[smoke133]

Do you do anything to the php file to call out the css sprite image?

[smoke133]

I'm trying to add a css sprite to my drop shadow.

tpl_header:

<!-- divs for drop shadow -->
<div id="nw"><div id="ne"><div id="se"><div id="sw"><div id="n"><div id="s"><div id="w"><div id="e"><div id="main"><table id="workaround"><tr><td>
<div id="headerWrapper"> 

tpl_footer:

<!--closting divs for drop shadow -->
</td></tr></table></div></div></div></div></div></div></div></div></div> 

Here is my CSS

/*drop shadows section */
* html #nw, * html #ne, * html #se, * html #sw, * html #n, * html #s, * html #w, * html #e {background:none!important;}

#nw {
  	background: url("../images/shadow_nw.png") top left no-repeat;
	}
	
#ne {
  	background: url("../images/shadow_ne.png") top right no-repeat;
	}
	
#se {
  	background: url("../images/shadow_se.png") bottom right no-repeat;
	}

#sw {
  	background: url("../images/shadow_sw.png") bottom left no-repeat;
  	padding:0 10px ; /* border thickness */
	}

#n {
  	background: url("../images/shadow_n.png") top repeat-x;
	}
	
#s {
  	background: url("../images/shadow_s.png") bottom repeat-x;
  	padding-bottom: 10px; /* border thickness */
	padding-top: 10px; /* border thickness */
	}

#w {
  	background: url("../images/shadow_w.png") left repeat-y;
  	margin-left: -10px; /* border thickness */
  	margin-right: -10px; /* border thickness */
	}

#e {
  	background: url("../images/shadow_e.png") right repeat-y;
	}
	
#main {
  	margin-right: 10px; /* border thickness */
  	margin-left: 10px; /* border thickness */
	}

table#workaround {
  	margin: 0;
  	border: 0;
  	border-collapse: collapse;
	width:100%
	}

table#workaround td {
    padding:0;
    margin:0;
}

[clydejones]

I'm trying to add a css sprite to my drop shadow.

shadow_nw.png is your css sprite.

For more information - google css sprites