css拉伸背景图像精灵技术

我有一个带有样式的div，它的宽度是动态的

<style>
#mydiv {
    background-image: url('http://icons.iconarchive.com/icons/manda-pie/chocolate/icons-390.jpg');
    background-repeat: no-repeat;
    border: 1px solid red;
    width: 50%;
    height: 200px;
    background-position: -0px -0px;
    -moz-background-size: 448px 368px;
    background-size: 448px 368px;
}
</style>
<div id="mydiv"></div>

#mydiv{
背景图像：url（'http://icons.iconarchive.com/icons/manda-pie/chocolate/icons-390.jpg');
背景重复：无重复；
边框：1px纯红；
宽度：50%；
高度：200px；
背景位置：-0px-0px；
-moz背景大小：448px 368px；
背景尺寸：448px 368px；
}

如果拉伸浏览器窗口，将看到div拉伸。 如何使背景图像以与div相同的方式向右拉伸？

使用

-moz背景大小：100%100%；
背景大小：100%100%
访问“”

{背景大小：100%100%；}

#mydiv