Search code examples
htmlcssperformanceimage-clipping

Background image viewport by many-images-in-one-image-file

To reduce the loadtime of my webpage I put all icons into one big imagefile.

enter image description here

What I need now is the fourth icon (attachment-icon) as button icon.

This is what I have:

button.attach {
  background: lightgray url(https://i.sstatic.net/ZT5KK.png);
  background-position-x: -116px;
  padding-left:30px;
  height:45px;
  
}
<button class="attach"> Attach file</button>

Unfortunately the fifth icon (trash) and the sixth icon (bug) sneak behind the text. How to cut the image down to this icon only?

Solution 

  • button.attach span {
    background: lightgray url(https://i.sstatic.net/ZT5KK.png) -111px 38px;
    padding-left: 1px;
    display: block;
    float: left;
    width: 35px;
    height: 35px;
}
    button.attach {
    width: 130px;
    height: 44px;
}
        <button class="attach"><span></span> Attach file</button>

    Here i attached css in snippet, you can adjust as per your requirements. let me know if you have any query.