class soll Box mit "Imagerand" produzieren

[crizon]

Hier erstmal ein Bild an dem ich das verdeutlichen will:

Was ich erreichen will:

Eine CSS klasse, die eine Box produziert, die einen Rand hat, der aus verschiedenen Bildern besteht.
Dabei soll sich der Rand an die Höhe der Box anpassen.

An dem Beispiel:
Oben und unten das blaue Bild. Links wiederholt sich das rote, je nach Größe der Box; rects das Gelbe.

Mit 4-5 Divs würde ich das so schon hinkriegen.. ich möchte aber eben eine CSS-class, die diese Divs umfasst.

Am Ende will ich nur <div class="boxmitrand"> eingeben und die box erscheint mit dem Rand.


Ist das mit HTML/CSS sauber zu lösen ?

Ich hab atm einfach keinen Ansatz.

vielen Dank im vorraus!

 

[prm]

Ich würde es so lösen:

Eine Klasse für den blauen Teil oben und unten, spfern dieser identisch groß ist.
Der mittlere Teil mit rot/gelb soll sich vertikal entsprechend dem Inhalt wiederholen. Dazu würde ich eine Grafik anfertigen und nach dem Prinzip von "Faux Columns" einbinden:
Faux Columns

 

[Körnerbrötchen]

Mit zwei divs kriege ich das hin. Eine äußere div, die den blauen Hintergrund enthält und padding-top und padding-bottom entsprechend der Höhe hat. Eine innere div-Box für den Seitenrand. Klappt allerdings nur wenn oben und unten gleich aussieht.

 

[crizon]

oben und unten sieht leider nicht gleich aus.. hätte doch unterschiedlich farben nehmen sollen.

wollte mit den gleich farben nur ausdrücken, dass diese bilder sich nicht wiederholen sollen.

ich mache es mal konkret. dieses box will ich realisieren:

Falls es nicht "einfach" zu machen ist.. geht das den mit einem CMS ? Ich habe damit bisher leider überhaupt nichts am Hut gehabt, aber ich denke ich könnte mich da schon irgendwie durchbeißen.

Andererseits.. Ich glaube es wäre im Endeffekt auch nicht so schlimm wenn es ein paar Divs mehr werden würden. Dann muss ich halt meine Copy/Paste SKills weiter ausbauen :-)

mfg

 

[Körnerbrötchen]

Probier doch mal

div:after { };
div:before { };

aus.

 

[prm]

Mit einer Klasse geht das nicht.
Wenn oben und unten unterschiedlich ist, dann brauchst du drei.
Eine für oben, eine für unten und eine sich vertikal kachelnde für die Mitte.