Home/ Questions/Q 8156069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T16:50:37+00:00

I generated a CSS Spritesheet with the help of a Texture packer and its

  • 0

I generated a CSS Spritesheet with the help of a Texture packer and its looks like

.pirateSlotSprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/pirateSlotSprite.png);}
.backgroundps {width:800px; height:480px; background-position: -105px -304px}
.balanceBlockps {width:122px; height:61px; background-position: -0px -0px}

...more classes for each frame...

.lineControlps {width:113px; height:65px; background-position: -580px -0px}
.maxBetButtonps {width:115px; height:64px; background-position: -348px -0px}

Then I apply the classes pirateSlotSprite and backgroundps to a div (sav bgDiv) to display the background frame from the sprite sheet. Everything is fine upto this point.

bgDiv will get resized when the browser gets resized, but the background picture remained static without getting shrinked/enlarged to fit bgDiv.

So I added background-size:100% to pirateSlotSprite, but the sprite gets shifted to a different position. I guess the whole image gets shrinked first and then background-position:-105px -304px gets applied without the position values being scaled. If needed I will share the pictures to make the problem easier to understand.

Any ideas on how to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You misunderstand the way background images work. Positioning for background-images work with either pixels or percentages. But the images themselves are displayed in their true resolution and aspect ratio (unless altered by JavaScript). So they won’t ‘scale/stretch’ when you resize the browser window.

    • 0