Make CSS sprite image always fill its container

Question

I've been struggling on this for quite a while now. I'm currently working on a project where I need to use a sprite from a sprite sheet as a button.

My sprite is 200x20, so if my button is the same width and height, there's no problem. But if my button is 400x20 (or any bigger size), it won't scale up. If my button is smaller, the image is just being cut (with a 100x20 button, the image is cut in half).

The thing is that I must use the same sprite for all these buttons, so it needs to scale up or down to fill its container, no matter what its size is, even is the aspect ratio is not kept. If it's not clear, the entire sprite must always fill all the space in the div (it should grow or shrink depending on the container's size).

I have tried using background-size with many different properties, but nothing seems to work. Transform: scale() is useful but it looks like it always keeps the aspect ratio, so I can't have half buttons for example.

.normal {
  width: 200px;
  height: 20px;
  /* The sprite is already 200x20 so this button is perfect.*/
}
.huge {
  width: 400px;
  height: 40px;
  /* The div is bigger than the first one, the sprite should scale and stretch if aspect ratio can't be maintained. */
}
.half {
  width: 100px;
  height: 20px;
  /* The right end of the div must be the sprite's end just like the first div. 
    So the image should not be cut in half, just resized even if aspect ratio is not kept.*/
}

.button {
  background: url("https://i.imgur.com/N75gIin.png");
  background-position: 0px -66px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.button:hover {
  background-position: 0px -86px;
}

<div class="button normal">Singleplayer</div>
<br><br>

<div class="button huge">Multiplayer</div>
<br><br>

<div class="button half">Settings</div>

The sprite sheet I'm trying to use.

I really hope someone will be able to help me, it seemed easier than it actually is.

Does this answer your question? [How can I scale an image in a CSS sprite](https://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite) — Chris W., Apr 28 '22 at 02:03
Could you explain a bit more - for example in the last one 'the div should not be cut in half' - the div hasn't been cut in half, it's got a width of 100px. A background image cannot be seen outside its element so I am confused as to what you want to happen. — A Haworth, Apr 28 '22 at 05:58
@ChrisW. I've already looked at all these answers and I can't find one answering my problem. They mainly explain how to have a bigger image, and it works using scale(), but my image also needs to fill the container if it is smaller. — Edgar C., Apr 28 '22 at 10:47
@AHaworth sorry I edited it just now, it was late when I wrote the question. With a smaller container, parts of the *image* aren't shown. I just want the sprite to grow and shrink to always be entirely visible in the container, even if it means that the aspect ratio of the sprite is not kept. — Edgar C., Apr 28 '22 at 10:53
Ya one of the answers on there is the one that explains "when you use sprites you are limited to the dimensions of the image in the sprite", in other words sprites aren't meant to be used in the way you're aiming for. In your specific instance you're going to need a different alternative, like a separate image. For instance like your example shown personally I'd make a tiny square of that texture and just repeat it across as a background and use css to provide the edging accent. — Chris W., Apr 28 '22 at 13:23
@ChrisW. Thanks for your answers, but that's unfortunate since in my case I must use sprites. I'm recreating a basic version of the Minecraft game with the original assets, and the original game uses this exact same sprite sheet. Do you know of another way to use the sprite like for example with JS (I'm using Node)? — Edgar C., Apr 28 '22 at 17:10

Make CSS sprite image always fill its container

0 Answers0