Question

I have a rollover image that makes use of a large background image that keep changing it’s background-position based on which area the mouse is over.

$(this).mouseover(function() {
    $('#' + id).css('background-position','0 -' + thisoffset + 'px');
})

The problem is that I am trying to make the image scalable. With normal <img> tags, I could just specify width/height and it will scale, but there is no such property for background-image, so what solution do you use?

CSS3 has a background-size property, but not all web users have a CSS3 compliant browser…

=======================

Clunky, but I got it to work with GGG’s answer using this layout

<div id="outer"
     style="width:300px;height:330px;position:relative;overflow:hidden;">
<img id="image"
     src="url.gif"
     style="width:100%;height:auto;position:absolute;left:0;bottom:0;z-order:-99;" />
<img id="areamap"
     src="transparent.gif"
     style="width:100%;height:100%;position:absolute;"
     usemap="#map" />

This way, I only need to specify the container width once (div). The image scales to the width (100%) and the height auto-calculates using the same scale. The transparent image which is mapped fills the container entirely.

Answer 1

You answered your own question, it’s the CSS background-size property. You could also use transform. All of this stuff is CSS3, there was no way to do it prior to that.

What you can do is use a normal img, scaled, and change its position within a div that clips it.

The HTML will look something like this:

<div class="map-outer"><img src="map-sprite.png"></div>

The CSS will look something like this:

.map-outer { height: 500px; width: 500px; overflow: hidden; position: relative; }
.map-outer img { height: 5500px; width: 500px; position: absolute; }

Now you can set the top and left CSS properties on the img in the same way that you were setting the background-position property before.