Jquery ui Jquery ui可调整大小的重新缩放背景图像

我有一个带有背景图像的

div

，我允许用户使用

jqueryui的可调整大小的

函数重新缩放

div

。我希望当用户调整

div

的大小时，背景图像可以缩放。但这并没有发生。有没有简单的方法来解决这个问题

我发现了一些其他示例，其中他们在

div

中使用了

标记。但是我真的想用CSS作为背景图像

HTML:

JS:

---

将

背景大小设置为百分比：

设置背景图像的宽度和高度（以百分比表示）
父元素。第一个值设置宽度，第二个值设置
高度。如果只给出一个值，则第二个值设置为“自动”

有关
背景大小
属性的更多信息，请参阅

CSS:

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

    </div>           
</div>


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

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

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

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

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