1

Is it possible I can resize a background image of a <li> of which is in a sprite?

I have this HTML:

<li class="bg_image"></li>

and this is the CSS:

.bg_image {background:url('sprite.png') no-repeat;
background-position:-422px -46px;width:32px;height:32px;}

The image on the sprite has width and height 48px because is used elsewhere in the site. I'd rather use the same instead of making a new HTTP request of the same image with smaller size, or increase the size of the sprite.

Is it possible I can resize it from 48px width and height to 32px ?

Thanks alot

jQuerybeast
  • 14,130
  • 38
  • 118
  • 196

2 Answers2

2

This can be easily done using the CSS3 background-size property.

Create a new CSS class which is also using the same (larger) sprite image, but with the background size reduced. E.g. If your original sprite is 640px by 320px, you might do this in the CSS:

.bg_image_new
{
    background-image:url('/your/image.jpg');
    background-size:320px 160px;
    background-position:-422px -46px;
    width:32px;
    height:32px;
}

Note: Since you're effectively reducing the background sprite to a new size, the background positions will therefore change. You'd then need to re-calculate the new positions. For your case you're doing a 33.33% (48px->32px) reduction and thus the positions are going to be -33.33% off as well.

Finally, in your html, simply do:

<li class="bg_image_new"></li>

That should do the trick, at least for modern browsers.

ckng
  • 545
  • 1
  • 5
  • 16
0

AFAIK not possible in current browsers. Not with your HTML at least. You could have a background (z-indexed) <img src="sprite.png" /> in your li that would have appropriate width and height. The image would also need to have position:absolute and be parented with span with position:relative, and overflow:hidden... And a bit more tweaking.

I would say you should make more images with correct sizes of icons or add rows with different sizes of icons to your sprite.png.

Nux
  • 9,276
  • 5
  • 59
  • 72