wrap exist element with an image as background

Question

I have some containers in the page like this:

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

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

And an image like this:

Now,I want to make the image as the background of the containers to make the containers look like a window. Like this:

Also,the size of the containers may changed according to user. So I want it can auto expand when the content of the containers added.

Any idea?

---

update:

What I have tried yet:

And this is what I get now: jsfiddle

Answer 1

EDIT:

Solution n.2:

you could even use two divs, one "outer" with the gradient background, the optional shadow, and the rounded borders, and one "inner" with white background containing your stuff.

Demo: http://jsfiddle.net/TqutW/4/

HTML

<div class="windowBorder" >
    <div class="windowContent" >
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>                          
    </div>        
</div>

CSS (crossbrowser)

.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;   
}

You only need to create the div(s) around your content via javascript...

---

Solution n. 1

You don't really need to use images for this.

(you would need to use images, for example, with a "wood" border, then you should do it in the old-school way... an image for every angle, one image for the vertical line, one for the horizontal line, and a lot of divs...)

All you have here is a gradient (achievable using CSS3 Gradients) and rounded borders (achiaveble using CSS3 border-radius). You can add shadow too with CSS3 box-shadow...

Gradients are easily generated with the CSS3 Gradient Generator, but today they're cross-browser for BACKGROUND attribute only... you can use gradient on BORDERS in webkit browsers, not yet in FF nor IE... but you can add a div as the header of the window, with a gradient background.

This is a fiddle for wrap content inside a window with rounded border and shadow (with no gradients):

http://jsfiddle.net/TqutW/3/

And the only javascript needed is the one that applies the new class to the container div... enjoy.

HTML

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

CSS

.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;
}

JS

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

Answer 2

Try the fiddle, http://jsfiddle.net/siyakunde/TqutW/1/ Is this what you are trying to do?

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