CODEWITHSUNDEEP
htmlcssperformanceimage-clipping
Grim
Grim

Reputation: 2040

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?

Upvotes: 0

Views: 36

Answers (1)

Harshsetia
Harshsetia

Reputation: 265

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.

Upvotes: 1

Related Questions