ad: Hintergrundbild eines DIVs mit variabler Höhe

Moin,
ich habe ein DIV mit einem Hintergrundbild. Das Bild hat einen definierten Kopfteil, in der Mitte ist es einfarbig mit einem Rahmen links und rechts und einen definierten Fußteil (Abschluss).

Je nachdem wieviel Inhalt drin ist, ist das DIV entspr. hoch. Momentan habe ich nur 1 Hintergrundbild, das natürlich nur bei einer ganz bestimmten Höhe exakt passt.

Ich stelle mir das jetzt so vor. Ich schneide das Bild kurz vor dem Fußteil auseinander. Die "Mitte" verlängere ich ein gutes Stück nach unten, das es auf jeden Fall reichen wird. als zweites Bild hab ich nur den Fussteil.

Wie bekomme ich jetzt die Fußteil immer an das untere Ende des DIVs, sodass es die "Mitte" überlagert und einen schönen Abschluss bildet? Ich kann und will kein 2. DIV nur für den Fussteil erstellen.

Ich hoffe ich versteht was ich meine :)

danke

  1. Hallo,

    ich habe ein DIV mit einem Hintergrundbild. Das Bild hat einen definierten Kopfteil, in der Mitte ist es einfarbig mit einem Rahmen links und rechts und einen definierten Fußteil (Abschluss).

    Je nachdem wieviel Inhalt drin ist, ist das DIV entspr. hoch. Momentan habe ich nur 1 Hintergrundbild, das natürlich nur bei einer ganz bestimmten Höhe exakt passt.

    Ich stelle mir das jetzt so vor. Ich schneide das Bild kurz vor dem Fußteil auseinander. Die "Mitte" verlängere ich ein gutes Stück nach unten, das es auf jeden Fall reichen wird. als zweites Bild hab ich nur den Fussteil.

    also das Sliding-Doors-Konzept, nur vertikal. Die Idee ist alt und bewährt.

    Wie bekomme ich jetzt die Fußteil immer an das untere Ende des DIVs, sodass es die "Mitte" überlagert und einen schönen Abschluss bildet? Ich kann und will kein 2. DIV nur für den Fussteil erstellen.

    Ich hätte da mehrere Vorschläge.

    * Verwende multiple Hintergründe. Setzt moderne Browser voraus.
     * Verwende die Pseudoelemente ::before und/oder ::after. Setzt halbwegs moderne Browser voraus.
     * Gib eines der Hintergrundbilder dem div-Container selbst, und das andere seinem letzten sowieso
       vorhandenen Kindelement. Dieses muss dann natürlich bündig mit dem Container abschließen.

    Such dir was aus. :-)

    Ciao,
     Martin

    --
    Fische, die bellen, beißen nicht.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. Om nah hoo pez nyeetz, ad!

    ergänzend zu Martins Vorschlägen: http://selfhtml.apsel-mv.de/hintergrund/hintergrund.html

    Matthias

    --
    1/z ist kein Blatt Papier.