How to implement a glass effect created on PS-CS4 around the template using PNG?

Question

Hi as I said some times before I'm new to CSS coding, I want to know if it is possible to create a glass sheet (vista/seven like but without the buttons) around the template using only CSS, I know how to make rounded corners:

    <style type="text/css">
    #box {

      position: relative;
      width: 100px;
    }
      .corner {
        background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
        display: block;
        height: 10px;
        position: absolute;
        width: 10px;
      }
      .tl { top: 0; left: 0; background-position: 0 0; }
      .tr { top: 0; right: 0; background-position: -22px 0; }
      .bl { bottom: 0; left: 0; background-position: 0 -22px; }
      .br { bottom: 0; right: 0; background-position: -22px -22px; }

      .content {padding:10px;}

    </style>

    <div id="box">
      <div class="corner tl"><!-- --></div>
      <div class="corner tr"><!-- --></div>
      <div class="corner bl"><!-- --></div>
      <div class="corner br"><!-- --></div>
      <div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div>
    </div>

I already have the graphics created on photoshop and sliced

ex taken from answer here, but how do I make for example a div stick to the left and auto expand till the bottom with some margin on it? or is that an easier way? I just don't want to use tables or even worst JS (don't know how to use this language yet)...

Any answer will be appreciated!

Answer 1

3 divs containing background images. cut the image into 3 parts. top mid and bottom. top one has top glass. and bottom has bottom glass. and repeat-y the middle one. and put contents in the middle div.