Wie kann ich Grafiken nach Platzgebrauch automatisch wdh.?

    Hallo,
    ich habe mir folgende Grafik erstellt:
    [Blockierte Grafik: http://www.abload.de/img/navw7f.png]
    In der Mitte bleibt, wie ihr vielleicht seht die Linie gleich und oben und unten ist ein Verlauf eingebaut. Insgesamt sind es also 3 Ebenen.
    Nun gibt es ja Lösungen, dass wenn der Text nach unten größer wird, sich ebenfalls auch die normale Linie (welche mittig liegt) anpasst und erneut eine Grafik drunter setzt. Natürlich sollte die mittlere grafik dann auch nicht so lang sein wie jetzt auf dem Bild sondern vielleicht nur 1-2 Pixel lang, damit es auch wirklich dem Text angepasst aussieht.


    Nur weiß ich jetzt leider nicht, wie diese Methode heißt, bzw konnte so auch nicht nach einem schönen Tutorial suchen.

    Ich hoffe mal auf eure Hilfe und bedanke mich schon mal :wink:

    du willst also diesen farbverlauf in beide richtungen und daß die mitte in der höhe variable ist?

    also ich hatte des mit drei divs gelöst, nur daß bei mir der obere und untere bereich etwas größer war als bei dir..
    http://home.arcor.de/synaptic/contest/content.html

    kannste dir ja hier mal angucken... der weiße bereich mit dem inhalt ist in der höhe variabel...

    sollte ich dich falsch verstanden haben, stell die frage bitte so, daß ich dummdödel sie versteh ;)

    hast du dir den quelltext mal angesehen vom link den ich gepostet habe??
    dort siehst du daß ich das mit 3 divs realisiert habe, die von einem wrapperdiv mschlossen sind...
    der farbverlauf oben bekommt einen teil deiner grafik (die du in 3 teile zerscheiden musst), der mittelbereich bekommt entweder grafik oder einfach ne farbe und der untere bereich ist auch wieder ein teil der grafik, so hast du immer oben und unten nen farbverlauf und in der mitte eine variable höhe!

    Sieh dir mal diese Anleitung an.
    Da ist eigentlich das Grundprinzip erklärt. Du müsstest dann lediglich bei .box die mittlere Grafik als Hintergrundgrafik einfügen mit dem Zusatz:

    Code
    background-repeat: repeat-y;

    , damit sich der Mittelteil vertikal kachelt.

    Für den oberen und unteren Teil nimmst du

    Code
    background-repeat: no-repeat;

    um ein Kacheln zu verhindern.