Dreiteiliger vertikaler Background

[TheThrust]

Hallo Leute,

Folgendes Problem:

Mein Design für den Hintergrund ist (etwas übertrieben) in einer Rautenform.
Diese Form habe ich in 3 .png images verwandelt: die obere Hälfte, ein 1px-Streifen aus der Mitte (für repeat-y) und die untere Hälfte.

PNG war nötig um die halbtransparenten Ränder und überstehenden Ornamente einzubinden.

Ich möchte nun gerne, dass die Raute sich im Mittelteil "verlängert", wenn der Inhalt länger wird (klar, dann ist es keine Raute mehr, aber egal).

Bisher hatte ich nur mit zweiteiligen Backgrounds zu tun, das war dann ganz einfach zu lösen, indem man 2 DIVs inneinander und jeweils mit background-position die Background-teile jeweils an top und bottom verbannt hat, voilà, man hatte seinen "resizable" Background.

Jetzt ist das ganze jedoch schwerer, da ich aufgrund der PNGs nicht einfach ein drittes Div um die beiden anderen setzen kann (dann würde ja hinter der ersten und zweiten hälfte der Raute der mittlere Teil im repeat-y zu sehen sein).

Maximal kann ich im ersten Div (für die "reziable" Mitte) die Background-position so anpassen, dass der background erst exakt beim ende der ersten Hälfte der Raute beginnt, aber dann habe ich immer noch hinter der zweiten Hälfte der Raute den repeat-y aus dem ersten DIV zu sehen.

Ich hoffe ich habe das jetzt nicht zu unverständlich erklärt :)

Hier nochmal das Listing:

CSS:

  
#container {  
  width: 900px;  
  overflow: hidden;  
  position: relative;  
  left: 50%;  
  top: 0px;  
  margin-left: -450px;  
}  
  
#content_con {  
  width: 100%;  
}  
  
#content_begin {  
  background: url(images/content_begin.png) no-repeat left top;  
}  
  
#content_middle {  
  background: url(images/content_middle.png) repeat-y 0 320px;  
}  
  
#content_end {  
  background: url(images/content_end.png) no-repeat left bottom;  
}

(X)HTML:

  
<div id="container">  
  <div id="content_con">  
    <div id="content_middle">  
      <div id="content_begin">  
        <div id="content_end">  
  
          hello world<br />  
  
        </div>  
      </div>  
    </div>  
  </div>  
</div>  

Ich würde mich freuen, wenn jemandem eine schlaue Lösung einfällt, die um eine .jpg oder .gif als png ersatz herumkommt (das würde mein Design völlig zerstören).

Vielen Dank schonmal im Vorraus!

Gruß Thrust