How to use css sprite correctly? - html

Question

I am trying to move a piece of text on a specific part of image using css sprites.But the background position I am applying doesn't seem to work. I have tried changing the background position but the text part(i.e. twitter, facebook) doesn't move to the correct place.
#fixedsocial {
background:url("../img/socials/icon.png") no-repeat;
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
text-indent:-9999px;
}
.facebookflat {
background-position: -200px 0;
height:50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
height:50px;
background-position: -400px 0;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat"> </div>
</div>

Answer 1

The reason it's not working is that you assign the background image to the container-div (#fixedsocial), and try to adjust the positioning on the inner-divs, which has no background to position. You need to rethink your CSS a bit, for one you have to assign the background where you actually want to use it.
Here's a fiddle: https://jsfiddle.net/j7kyhgmc/
#fixedsocial {
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
}
.facebookflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -168px -161px;
background-size: 1430% 1430%;
height:50px;
width: 50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -430px -161px;
background-size: 1420% 1420%;
height:50px;
width: 50px;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat">
</div>
</div>