Css 以图像为背景包装存在元素

我在页面中有一些容器，如下所示：

<div id="con1" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

<div id="con2" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

xxxx
xxxx
xxxx
xxxx

像这样的图像：

<div id="con1" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

<div id="con2" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

现在，我想将图像作为容器的背景，使容器看起来像一个窗口。像这样：

此外，容器的大小可根据用户的不同而改变。所以我希望它可以自动扩展时，容器的内容添加

有什么想法吗

---

更新：

我已经尝试过的：

这就是我现在得到的：

试试小提琴， 这就是你想做的吗

#content{
  background-image: url('http://www.google.com/images/srpr/logo3w.png');
  background-size: 100% 100%;
}

编辑：

解决方案n.2:

你甚至可以使用两个div，一个是渐变背景的“外部”，可选的阴影和圆形边框，另一个是白色背景的“内部”，包含你的东西

演示：

HTML

您只需要通过javascript围绕您的内容创建div

---

溶液。1

你真的不需要用图像来做这个

（您需要使用图像，例如，带有“木头”边框的图像，然后您应该按照传统的方式进行操作…每个角度都有一个图像，一个垂直线的图像，一个水平线的图像，以及许多div…）

这里的所有内容都是渐变（可以使用

CSS3渐变实现）和圆角边框（可以使用
CSS3边框半径实现）。您也可以使用
CSS3 box shadow
添加阴影

渐变很容易用生成，但现在它们只在
BACKGROUND
属性的跨浏览器中使用。。。你可以，在FF或IE中还不能。。。但是您可以添加一个div作为窗口的标题，带有渐变背景

这是一个用于在具有圆形边框和阴影（无渐变）的窗口内包裹内容的提琴：


唯一需要的javascript是将新类应用于容器div的javascript。。。享受

HTML

JS

我试着一个接一个地创建9个具有绝对位置的div，每行三个（总共三行）（参见更新的图片I）。并为div设置背景，期望div位于中间。现在，它可以工作了，但是容器不能根据内容更改其大小。请参阅我的更新。我更新它，不是我想要的。事实上，我只需要背景图像的四个侧面。太棒了！但是如果我想在跨浏览器（ie7和ie7+以及ff、chrome）中实现相同的效果，该怎么办？这两种解决方案都是交叉浏览器！唯一不交叉的是渐变边框，只有一个div。。。我没有包括：）如果你看解决方案n.2，所有这些背景渐变的（注释）代码都是由链接的CSS3渐变生成器生成的，将与IE6交叉：）看CSS部分注释的末尾，看看将阅读该声明的浏览器的名称非常感谢！那么，如果我想使用一些css3无法实现的背景图像，比如
http://imagebin.org/242132
？似乎唯一的解决方案是老派的方式？不，我忘了指定解决方案n.2也可以使用背景图像。。。只需更改“背景”部分，删除渐变并添加图像。请考虑你在评论中张贴的图片与这个问题完全不同。问题中的一个是渐变窗口，注释中的一个是工具提示，没有渐变，但是有一个箭头。。。它们的处理方式通常不同。请看一下如何仅使用CSS在一个对象外部创建三角形，而不使用工具提示图像：
.windowBorder{
  margin: 30px;  
  padding: 20px 8px 8px 8px;  
  box-shadow: 2px 2px 5px 1px #111111;
  border-radius: 10px;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 13%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(13%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 13%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.windowContent {    
   padding: 10px;
   background-color: white;   
}

   <div id="container1">            
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
   </div>
   <br/>
   <input type="button" id="click"  value="windowization! :)"/>

.window{    
  margin: 30px;
  padding: 10px;
  border-style: solid;  
  border-width: 20px 8px 8px 8px;
  border-color: #444;
  border-radius: 10px;
  box-shadow: 2px 2px 10px 1px #111111;
}

document.getElementById("click").onclick=function(){
   document.getElementById("container1").className+=" window ";
}