0

I'm pulling an image from a tile set at the size of 50px x 50px. I want to be able to make this image depending on what size I want it. Is there a way to pull out this image and resize it without having to deal with background-size? Perhaps pull this image into a div and resize the div?

img.tileone
{
width:50px;
height:50px;
background:
url(images/summertile.png) -1px -1px;
}

Say for example I'm pulling out a tile 50 x 50 but I want to resize it 75 x 75.

Sjrsmile
  • 253
  • 1
  • 5
  • 20
  • what about changing the whole picture's size and the size of the div and then making the overflow hidden? – Mohammad Areeb Siddiqui Jun 19 '13 at 09:23
  • you have a background image and you wan't to give it a size. But you don't want to set the background image size??? – Karl Adler Jun 19 '13 at 09:24
  • When I change the size of the image it pulls out more from the tileset. The image I'm pulling out is 50 x 50, and if I change it to 75 x 75 it pulls out half of the next image. – Sjrsmile Jun 19 '13 at 09:25
  • I thought the background-size only changed the size of the tileset. If I do that how can I get the image pixel perfect out? For example, if the div is 100px, and the image needs to be 33.3%, how can I make sure I'm pulling out the correct image from the tileset? I thought there would be a way to pull out the image at 50 x 50, then treat it as a single image to change its size. – Sjrsmile Jun 19 '13 at 09:30
  • When you say tileset - i think you mean **sprite** :) – Danield Jun 19 '13 at 09:47
  • @Danield yes I do! I'm only just starting on this project so I'm getting used to new terms. Thanks! – Sjrsmile Jun 19 '13 at 09:52

1 Answers1

1

When using css sprites you must give them fixed width and height.

This means that there is no way to get them to resize dynamically.

If however you know a fixed set of new dimensions you might need for your div -

You could :

1) Add new variations of the image within the sprite or

2) Use scale to take care of this. Something like this:

.tileone {
   background-image: url(images/summertile.png) -1px -1px;
   -webkit-transform: scale(1.5, 1.5);
   transform: scale(1.5, 1.5);
 }
Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
Danield
  • 121,619
  • 37
  • 226
  • 255
  • This is the closest I've gotten so far! It's unfortunate I can't change the size pixel specific, but I can change my other code to make this work. Thank you! My code is `img.tileone {` `width: 50px;` `height: 50px;` `background: url(images/summertile.png) -1px -1px;` `-webkit-transform: scale(1.5,1.5);` `transform: scale(1.5,1.5);` } – Sjrsmile Jun 19 '13 at 10:00
  • Forgive the format of that, I can't seem to figure this site out. – Sjrsmile Jun 19 '13 at 10:01