How to use css sprite correctly?

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"> <a href="https://twitter.com/share" data-show-count="false"></a> </div>
</div>

i want to display Facebook and Twitter icon which is present on second row circle one — Falgun Lodaya, Nov 16 '16 at 06:09
"**i want to display Facebook and Twitter icon which is present on second row circle one**" What Does it mean? — ketan, Nov 16 '16 at 06:15
from that one image i want to display facebook and twitter image - circle icon on second raw — Falgun Lodaya, Nov 16 '16 at 06:17
You should use SVG Sprite instead. Image sprites are so old like of Dinosaurs era. — Mr_Green, Nov 16 '16 at 06:54
Please check this link:-http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag — Razia sultana, Nov 16 '16 at 06:58

junkfoodjunkie · Answer 1 · 2016-11-16T06:43:17.660

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">
          <a href="https://twitter.com/share" data-show-count="false"></a>
     </div> 
</div>

Added an example. I had to meddle with the `background-size` due to the fact that you `50px*50px` boxes were too small for the original image-size. If you want the icons to look good, you'll either resize the original image, or have slightly bigger boxes (and then lose the `background-size` property, and probably having to realign the icons with the `background-position`-property. — junkfoodjunkie, Nov 16 '16 at 06:45
If so, I would like a marked answer, if you would be so kind :) — junkfoodjunkie, Nov 16 '16 at 07:11

How to use css sprite correctly?

1 Answers1