Issues getting CSS sprite made by me working - html

Question

I made a CSS sprite using this online site. Here are the files I'm using. This is what I have right now in my HTML markup:
<img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" title="" class="e-shop" />
Since src can't be null I set a empty GIF in base64. Now, the problem is that the sprite.png file isn't loaded. So I modified the original code changing to this:
.contactenos, .contactenos-1, img.e-shop, .e-shop-1, .faq, .faq-1, .fctjur, .fctjur-1, .fctnat, .fctnat-1, .vendidos, .vendidos-1{
background: url(sprites.png) no-repeat;
}
But it's not working, maybe I'm doing something wrong, it's the first time I did this, any advice or help?
Test 1
I made some changes to the original CSS as follow:
.contactenos, .e-shop, .faq, .fctjur, .fctnat, .vendidos {
background: url(sprites.png) no-repeat;
}
.e-shop{
background-position: -198px -2px ;
width: 128px;
height: 50px;
}
.e-shop:hover {
background-position: -200px -56px ;
width: 128px;
height: 50px;
}
But still not working, is the problem the tiny default src image?

Answer 1

If that's your entire CSS, then you're missing a few things. Here's a fiddle using your markup and CSS (with a hard coded background image):
http://jsfiddle.net/5jvdmzgc/
You'll need to specify your elements width and height (right now, they're 1x1) and also the offset of the background image (if any).
Updated CSS:
width: 150px;
height: 50px;
background-position: -70px -120px;
Updated fiddle with different sizes specified:
http://jsfiddle.net/5jvdmzgc/1/
You can use the CSS you wrote as a "base" (specifies the image source), and then extend that with individual classes (width/height/bg offsets).
Hopefully this helps!

Answer 2

Your gif is only 1px by 1px. So your bg image is not going to be visible. You'll need to either set the dimensions in your css or provide a gif with the correct dimensions.
For example if your background image/sprite was 50px by 50px you could do this:
img.e-shop {
width: 50px;
height: 50px;
}
or
<img class="e-shop" src="
R0lGODlhMgAyAIAAAP///wAAACH5BAEAAAAALAAAAAAyADIAAAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=
" />
Fiddle