1

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?

saiy2k
  • 1,852
  • 1
  • 23
  • 42

1 Answers1

0

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.

Damien
  • 1,219
  • 13
  • 23
  • wont `background-size:100%` resize the image as and when the div to which it is applied changes it size.. I guess it resizes.. I will post sample code with image to make my problem clear – saiy2k Jun 29 '12 at 08:21
  • Yes, but not in correlation with a background position. Don't get me wrong, in theory this will work. But I don't see a way how you'll be able to calculate the correct positioning and stretching without making the images look bad/incorrectly positioned. – Damien Jun 29 '12 at 08:24
  • exactly this is where I am stuck. I dont know how to calculate correct positioning !!! – saiy2k Jun 29 '12 at 08:30