Help with CSS Sprite

[neodjandre]

Hello,

I have developed the following code which works fine but I think combining the images in a CSS sprite would be much more efficient since i have to repeat the code 12 times for all my buttons.

Any ideas on the proper css to use with a sprite image?

a.pushup {display: inline-block;padding: 5px 10px 5px 30px;font-family: Century Gothic, sans-serif;text-transform:uppercase;background:#131313;color:#fff;}
a.pushup:hover {color:#fff;background:#cc1a1a;cursor:pointer;} 

#psubmit {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
#psubmit:hover {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #cc1a1a;}
#pinfo {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
#pinfo:hover {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #cc1a1a;}
#pphone {background: url("http://beta.com/images/phone16.png") no-repeat scroll 8px 8px #131313;}
#pphone:hover {background: url("http://beta.com/images/phone16.png") no-repeat scroll 8px 8px #cc1a1a;}

HTML

<a class="pushup" id="pinfo" href="#">Email</a>

many thanks,
Andy

[dresden_phoenix]

The real advantage of using spites lies in saving HTTP requests ( and having one image ready loaded) and no so much in saving you characters in CSS.

But first thing first.. the code you posted would be far more efficiently written as:

a.pushup {display: inline-block;padding: 5px 10px 5px 30px;font-family: Century Gothic, sans-serif;text-transform:uppercase;background:#131313;color:#fff;}
a.pushup:hover {color:#fff;background:#cc1a1a;cursor:pointer;} 
#psubmit,#pinfo,#pphone  {background: url("http://beta.com/images/email16.png") no-repeat scroll 8px 8px #131313;}
#psubmit:hover,#pphone:hover,#pinfo:hover{background-color:#cc1a1a;}

the example you posed doesn't seem to pose the need for a sprite ( or show clearly what your intent is)


So here is the GENERAL idea:
Where sprite .png is a 50px x 150px PNG file "containing" 3 different 50px x50px images (obviously , vertically stacked)

.button1,.button2,.button3 { height:50; width:50px;  background:url(sprite.png) no-repeat 0 0 pink;}
.button2{  background-position:0 50px; background-color: orange;} 
.button2{  background-position:0 100px; background-color: blue;}

as you can see we have set the size of the .buttonX elements, so that they act as a "keyhole" ( you really cant use sprites unless you set at least one dimension as the other images contained in the file might show). then we use: background-position to align the full image so that the part we want shows through. optionally you can use background-color to set the background color as well.

This doesnt preclude you from using the background: 'shortcut', but if you do you would have to type the same attributes over and over as you noticed.

[neodjandre]

thanks for the reply and sorry for the confusion - the images are different so i can't use your first suggestion - I know how sprites work but i can't figure out the specific CSS code i will need for this particular case...

the problem lies with the way i create the buttons i think.. i think i would need some specific css code here but thanks for the feedback.

[HAWK]

Hey @neojandre ;
We've built a new product at SitePoint to help people fix their CSS in real-time. This looks like something that we could easily help you fix immediately.
One of our CSS experts is online now and ready to help if you're interested.

Edit: I'm removing the link to the product while we fine tune and develop further. Will keep you posted.