title: Repeat second background image under first image
body: <p>I'm trying to use 2 instances of  <code>background-image</code> in one <code>&lt;div&gt;</code> layer. 
  The first <code>background-image</code> (which is partly transparent) should be displayed at <code>top</code> of the <code>&lt;div&gt;</code>, the second should be displayed directly under the the first <code>background-image</code> (this works).</p>
  
  <p>Due dynamic content the second image with a height of <code>1px</code> should be repeated vertically (<code>repeat-y</code>) and start repeating under the first <code>background-image</code>. My Problem is when I try to repeat the second <code>background-image</code> it is repeated over the whole <code>&lt;div&gt;</code> layer.</p>
  
  <pre><code>.mainFrameRoundBorder {
      border: none; 
      background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
      background-repeat: no-repeat, repeat-y;
      border-radius: 0 0 0 0;
      box-shadow:0 0 0 0;
      background-attachment: scroll;
      background-clip: border-box;
      background-color: transparent;
      background-position: center top, 0px 364px;
      margin-top:10px;
      padding: 6px 15px;
      overflow: hidden;
      color: #FFFFFF;
  }
  </code></pre>