Is it possible to resize a picture and set it as CSS: background?

Using javascript

[iProgram]

For example, I have a picture at [site.com...] (300x300)

And there is a div tag:

<div id="div" style="background: center no-repeat; width:100px; height:100px"></div>

Now I want to set the test.jpg as the background image of that div:

var div = document.getElementById('div');
div.style.backgroundImage = 'url(http://www.site.com/test.jpg)';

The problem is the size of div is 100x100 and the size of test.jpg is 300x300. Is there a way to resize the test.jpg using new Image() object to 100x100 first?

[Scruffy]

If you set the image tag width and height to the desired values it the browser will resize it.
But that is a horrible waste of bandwidth. Why not have the image at the correct size?

[Scruffy]

Oh sorry, background - that's different.

[Bernard Marx]

Is there a way to resize the test.jpg using new Image() object to 100x100 first?

No. That won't resize the image itself. There is nothing you can really do, if you are using the image as a BG image.

wrt an image element, as scruffy says, resizing would be a waste of bandwidth. It would probably look rather unpretty too.

[iProgram]

Ok abandon. The web application still could not replace desktop apps:)

[Rambo Tribble]

Perhaps is should be mentioned that many server-side languages, with the proper graphics libraries, can resize images on the fly.