To create this kind of content box you just need a wrapper for the box and two pseudo elements: before and after. No background images are needed.

You can see the example page here:
content_box.html

1. Step: The HTML5 markup

<article>
  <div class="content_box_polish">
    <div class="content_box">
      <figure><img></figure>
      <h1>Headline text</h1>
      <p>Some Lorem ipsum text.</p>
    </div>
  </div>
</article>

This markup creates an small article. The content is just an image, headline and some text. For the box two DIV’s with different classes are needed: .content_box_polish as a wrapper to arrange items around the box and content_box to style the box.

 2. Step: The Box Style

At first the position of the .content_box_polish must be relative to have a fix point for the :before and :after elements. The next thing is to style these elements and set them to the right position and the right z-index.

.content_box_polish {
  position: relative;
}

The :before element was used for the dark shadow at the top of the box.

.content_box_polish:before {
  content: "";
  display: block;
  height: 10%;
  width: 80%;
  margin: 0 10%;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  box-shadow: 0 0 10px 2px hsla(0, 0%, 0%, 0.25);
  position: absolute;
  top: 0px;
  z-index: 10;
}

The :after element was used for the light glow.

.content_box_polish:after {
  content: "";
  display: block;
  height: 1px;
  width: 50%;
  margin: 0 25%;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  box-shadow: 0 4px 4px 2px hsla(0, 100%, 100%, 0.5);
  background: #DEDEDE;
  position: absolute;
  top: 0px;
  z-index: 1000;
}

At least just some styles for the real box are needed.

.content_box {
  background: #dddddd;
  background: -moz-linear-gradient(top, hsla(0,0%,87%,1) 0%, hsla(0,0%,100%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,87%,1)), color-stop(100%,hsla(0,0%,100%,1)));
  background: -webkit-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  background: -o-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  background: -ms-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 );
  background: linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  padding: 1em;
  position: relative;
  z-index: 100;
}

For the gradient style the http://www.colorzilla.com/gradient-editor/ was used. To bring these three elements to the right order the z-index is needed. So we have the dark shadow, :before, behind the .content_box and the lighter glow, :after, in front of the content box.

You can easy change the effect by trying out some different values for box-shadow, width, position or whatever you want.