Ich versuche meine Widgets mit einem speziellen dreiteiligen Hintergrund auszustatten. Leider schaffe ich es nicht vollständig mit CSS und muss nun die individuelle Höhe eines jeden Widgets mit JS auslesen.
Hider Hintergrund: Es geht um die sidebar rechts auf dieser webseite: Doris Schützbach | Bürodienstleistungen
Ich habe so ein Papierstück designt und es in drei Zeile zerschnitten. Einen Kopf, ein Mittelstück das nur 1px hoch ist und ein Endstück:
Oben: http://www.doris-schuetzbach.de/wp-c...debar_oben.png
Mitte: http://www.doris-schuetzbach.de/wp-c...ebar_mitte.png
Ende: http://www.doris-schuetzbach.de/wp-c...ebar_unten.png
Ich würde das mittlere Stück gerne so oft wiederholen oder (wie hier) stretchen dass es den Raum zwischen dem Anfang und dem Ende auffüllt. Die Obere Grenze konnte ich ganz einfach bestimmen und festschreiben mit background-position: center 120px;
Aber wie man sieht, weiß ich nicht wie ich das untere Ende erreichen soll, da es von der Höhe der Box abhängt! Hab jetzt mal background-size: 100% 20%; zur Demonstration eingestellt: In der großen Box oben reicht es nicht aus und in den kleinen unten läuft es über (sieht man am Schatten rechts). Leider ist der Hintergrund ein gradient und deshalb sind die Bilder auch am Rand transparent! Man sieht es wie schon gesagt sehr schön am rechten Rand, wo der Schatten der Elemente übereinander steht..
Ich möchte nun mit JS die Höhe auslesen: http://de.selfhtml.org/javascript/obj…m#offset_height
Kann mir jemand sagen wo ich ein solchen JS Konstrukt einbauen muss, damit es für jedes Widget angewendet wird?