I have an html portion of code that contain images. The images can be resized/zoomed in html by simply changing their size (width and height). I want to replace the images with CSS Sprites(to load a single file instead of many). The problem is that if I have a background to a div, if I change the div size the image in the background is not resized.
Do you know a way to achieve it? Is there a way that works on most browsers to load cropped images portions from an image and then to resize them as I would do with a simple image?
Later Edit: The image(s) should be loaded only once and the resize should be performed on client size to provide the user a better view when moves the mouse over image.
In your specific use case pure CSS Sprites isn’t going to work and building complex javascript to chop up the sprite image is going to cause more overhead than just loading the images individually.
Not really an answer but your use case goes way beyond what the CSS sprites technique can do. If you can give some more context as to what your application does (ie. purpose of resizing, is resize happening serverside/clientside, ..etc.) there might be other solutions that will speed up the loading of the site.