Search code examples
jquery-uiresizablejquery-ui-resizable

Jquery ui resizable rescale background-image

I have a div with a background image, I'm allowing the user to rescale the div using Jquery UI's resizable function. I was hoping the background image would scale when the user resizes the div. But this doesn't happen. Is there an easy way to fix this?

I found some other examples where they used an <img> tag inside the div for it. But I really wanted to use CSS for the background-image.

HTML:

<div id="container">
    <div id="settingsWidget" class="SarahComponent">

    </div>           
</div>

CSS:

.SarahComponent {
    width:68px;
    height:68px;
}

#settingsWidget {
    background: URL('../../img/advancedsettings.png') no-repeat;
    padding:40px;
}

JS:

$("#settingsWidget").resizable({
    start: function (event, ui) {
        $(this).css("border", "1px solid red");
    },
    stop: function (event, ui) {
        $(this).css("border", "");
}

});
$("#settingsWidget").draggable({ cursor: "move" });

enter image description here

Solution

  • Setting the background-size to a percentage:

    Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"

    See this for more information about the background-size property.

    CSS:

    #settingsWidget {
  background: URL('https://placehold.it/68x68') no-repeat;
  background-size:100% 100%;
  padding:40px;
}

    Fiddle Demo