Double sized sprites

[Gandalf]

I’m wondering if it is possible to use double-size images as sprites. I have the following HTML and CSS but I can’t get the images to display as 24x24.

I did try transform: scale(.5); which resized the images but left a large gap between them.

<div class="social">
  <a href="https://"><img class="img1" src="images/blank150.png" height="24" width="24" alt=""></a>
  <a href="https://"><img class="img2" src="images/blank150.png" height="24" width="24" alt=""></a>
  <a href="https://"><img class="img3" src="images/blank150.png" height="24" width="24" alt=""></a>
</div>

.social img {
  width: 48px;
  height: 48px;
  background-image: url(images/social/social-48.png);
}
.img1 {
  background-position: 0 0;
}
.img1:hover, .img1:focus {
  background-position: 0 48px;
}
.img2 {
  background-position: 48px 0;
}
.img2:hover, .img2:focus {
  background-position: 48px 48px;
}
.img3 {
  background-position: 96px 0;
}
.img3:hover, .img3:focus {
  background-position: 96px 48px;
}

[PaulOB]

@Gandalf

.social img {
  width: 48px;
  height: 48px;

I’m not quite sure what you are up to but surely you want that to be 24px if your background size is double that and you just want to show half. You can move the background position around to show what you want as like as you have segments of 24px.

Make sure there is at least a pixel gap around the sprite otherwise one may bleed into the other due to rounding errors.

@Gandalf

I did try transform: scale(.5);

Transforms don’t affect the flow which is why they are performant. The size the element occupies is always the original size whether it looks larger or smaller.

[Gandalf]

@PaulOB

you want that to be 24px

In essence, yes, that’s what I want, but if I do that I only get 1/4 of the image.

[PaulOB]

@Gandalf

In essence, yes, that’s what I want, but if I do that I only get 1/4 of the image.

I assumed that would match the sprite on your image. I’m assuming you have multiple images on your sprite?

Maybe I misunderstand your goal. If the image’s natural size is say 48 x 48 and you have 4 sprites of 24x24 then applying the background image to a 24px blank image will show the 24x24 individual sprite which you can then move around with background position to show the others.

[PaulOB]

If your natural size image is not the size you want you can use background-size to force it to the size you want. Note that refers to the whole image and not part of the sprite.

[PaulOB]

Or you could just absolutely move the image around inside a fixed height container.

This is a scrolling example but the same method for sprites.

Stop me when you see one you like

[Gandalf]

Thank you, squire. Setting the background size seems to do what I was after. Sometimes I wish I hadn’t started something, they’re only icons after all. Anyways, I appreciate your help…

[Gandalf]

@PaulOB

Make sure there is at least a pixel gap around the sprite otherwise one may bleed into the other due to rounding errors.

I hadn’t thought of that . Does there need to be 1px round the edge as well as between them?

[PaulOB]

It’s the gap between the images. The outer edges don’t matter but of course you would probably want every sprite the same.

It’s really only an issue when someone zooms the page

[Gandalf]

I didn’t think it was needed round the edges, only CSS Tricks gives their example with 5px all round and between.

[PaulOB]

@Gandalf

only CSS Tricks gives their example with 5px all round and between.

That’s a bit overkill but better safe than sorry. Keeping all the sprites the same size with the same gap means you have everything consistent. If you don;t have a gap around the outer edges then that images is off centre by the width of the gap.
Hardly a problem on 1 or 2px though.