html css resize image from tileset

Question

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.

Answer 1

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

Take a look at both of them.

Answer 2

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);
 }