Usage background-image as image

Question

I have large image with emoji and use it like this:

Css:

.emoticon {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: top;
  background-image: url(path/to/image.png);
  background-repeat: no-repeat;
  background-size: auto;
 }
 emoticon.emoticon_1 { background-position: 0 -869px }

Html:

 <div class='emoticon emoticon_1'></div>

Problem is that original size of emoticons is 26x26 px, it is too lage. Are there some ways to transform it in 16x16 px image via css?

it is not a duplication. I need compress a part of image, not cut part of it — Ilya, Feb 25 '16 at 14:14
I wiuld have used css "transform: scale(0.61);" in order to resize — Daniel Voina, Feb 25 '16 at 14:15

score 1 · Answer 1 · answered Feb 25 '16 at 13:42

Try Using background-size differently (you can assign width and height, whether it is contained within or covers the element it's assigned to):

.emoticon {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: top;
  background-image: url("http://tigerhousecorbett.com/_include/img/work/full/image-14-full.jpg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
 }
 emoticon.emoticon_1 { background-position: 0 -869px }

<div class='emoticon emoticon_1'></div>

More info on what background-size can do: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Usage background-image as image

1 Answers1