Make Image sames size as Area

[treeleaf20]

Maybe this is an easy question:
I have the following CSS:
Code: [Select]
.fn-area:hover {
position: absolute;
background-image: url(artwork/image.gif);
border: 1px solid #fff;
}

The area is different sizes however. Is there anyway to make the image in the background adjust to the size of the area when I hover over it? I don't want the image to repeat if the area is bigger then the image and I don't want only part of the image to appear if it's smaller then the image.

[johanafm]

url(artwork/image.php?image=...);

Then scale and serve the image from your php script.

Or, use an image element instead of back-ground image. That way you can set width and height explicitly, and it actually looks fine if you don't care about pre IE8 people. But your width:height ratio needs to be the same for all images.