sprites for icons with responsive size like `background-size: contain;`

Question

I have an app that has lots of icons. I know that using sprites for these icons is the correct way instead of having multiple small images. However, I needed those icons to be the same size as the container (background-size: contain;), so I was forced to use multiple images for each icon:

.icon1 {
  background-image: url('../my-site/icon1.gif');
  background-size: contain;
}

.icon2 {
  background-image: url('../my-site/icon2.gif');
  background-size: contain;
}
. . . and so on...

Using sprites however, would result to:

(without background-size: contain;) - image is so small when i.e button is big
(using background-size: contain;) - the whole sprite is being shown to the container!

Is there a way to use a responsive sprite that would show the icon (using background-position) and making that icon 100% width and height of container?

if it is a sprite, contains or cover will show many of them , you need to focus on one and background-size to the needed ratio to clip unwanted parts. Post enough of your code and the sprite that shows your issue in order to get efficiently helped. thks for you — G-Cyrillus, Sep 06 '17 at 11:19
possible duplicate of https://stackoverflow.com/questions/45595520/css-sprite-background-sizecover/45596000 at least the answer i gave explains a little ;) — G-Cyrillus, Sep 06 '17 at 11:31
Possible duplicate of [CSS Sprite + background-size:cover](https://stackoverflow.com/questions/45595520/css-sprite-background-sizecover) — xGeo, Sep 06 '17 at 13:20

score 0 · Accepted Answer · answered Sep 06 '17 at 11:22

There is no magic solution to achieve that sadly. You will have to adjust the size of the background itself manually.

#home {
    width: 46px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0;
}

#home-double {
    width: 92px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0;
    background-size: 268px;
}

#next-double {
    width: 86px;
    height: 88px;
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0;
    background-size: 268px;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p>Normal size</p>
<p><img id="home" src="img_trans.gif"></p>
<p><img id="next" src="img_trans.gif"></p>

<p>Double size</p>
<p><img id="home-double" src="img_trans.gif"></p>
<p><img id="next-double" src="img_trans.gif"></p>

</body>
</html>

Note that with changing the background size you also have to change the background position.

Of course it is insane and doesn't make sense.

I recently stopped using sprite in favor of SVG sprites. They are incredible and more flexible and allow you to do much more. You can change their color and size, play well on retina screens.

If you still prefer PNG icons I would say ditch the sprites. Maintaining them is difficult even with a proper build process. Go for https and http2 then you will have absolutely zero problem with multiple concurrent requests.

sprites for icons with responsive size like `background-size: contain;`

1 Answers1