Beste Variante für <div> mit grafischem Rahmen?

[Saugkraft]

Hallöchen,

mich würde mal interessieren, wie ihr folgende Problemstellung umsetzen würdet:

Ich will auf einer Seite ein <div> unterbringen, das einen grafischen Rahmen hat. Ich erstelle in Photoshop also z.B. ein Quadrat mit blauem Rahmen, das mir auf der Seite als Umrandung für das <div> dienen soll.

Eine Möglickeit wäre, die komplette Grafik per CSS als background-image für das <div> zu definieren. Nachteil: ich bin mit dem Inhalt des divs an die Höhe der Grafik gebunden. Weil die Grafik ja eine vorgegebene Höhe hat.

Zweite Variante: ich teile die Grafik in drei Teile auf. Den oberen Teil (oben.gif), eine 1px hohe Grafik aus dem Mittelteil (mitte.gif) und den unteren Teil (unten.gif). Dann setze ich drei divs wie folgt übereinander:

<div style="background-image: url(oben.gif); background-repeat: norepeat;"></div>
<div style="background-image: url(mitte.gif); background-repeat: repeat-y;">Hier steht der Inhalt...</div>
<div style="background-image: url(unten.gif); background-repeat: norepeat;"></div>

Mir scheint die zweite Lösung praktikabel zu sein. Oder gibt es noch eine schickere Variante?

 

[koli.bri]

Ich hab mal eine herausgerissene Seite genau auf die Zweite Möglichkeit dargestellt.
Ziel war auch, dass sie in der Höhe variabel ist.
Also einen Kopfteil, einen Fußteil, der in der Größe fest ist geschustert, und den Mittelteil dann dann sich wiederholen lassen.

Genau so würde ich es auch wieder machen

gruß
Lukas

 

[Saugkraft]

Prima, danke. Dann werd ich mich da mal dran machen. Wollte nur noch mal Rat einholen, bevor ich wie ein Wilder die Grafiken erstelle und zerschnippele und dann evtl. feststelle, dass es so nicht klappt.