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

2 Answers2

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,485
  • 13
  • 67
  • 111
Danield
  • 114,415
  • 36
  • 213
  • 236
  • 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
0

May be this article or this question on stackoverflow may help you.

Take a look at both of them.

Community
  • 1
  • 1
Mohammad Areeb Siddiqui
  • 9,485
  • 13
  • 67
  • 111
  • I've had a look, and particularly the question on stackoverflow shows the image staying the same size but taken up room which is not what I want. I want the image to be the size of the div, so the 50x50 image becomes 75x75 and taking up the whole space. – Sjrsmile Jun 19 '13 at 09:38
  • do that article help you? @Sjrsmile – Mohammad Areeb Siddiqui Jun 19 '13 at 13:46