2 Bilder in einer Box

[kannaum]

Hallo,

ICh habe ien Problem.
Ich möchte eine Box machen indem ein Bild oben ist und darunter ein BIld ist das sich vom Text in der Box abhängig nach unten wiederholt.
Ich habe aber keine Ahnung wie ich das machen soll.
Und ich will keine 2 Boxen machen da in die Box Text kommen soll und mit 2 Boxen müsste ich immer einen Teil in die eine und einen Teil in die andere schreiben.

Zur besseren Vorstelung habe ich noch ein Bild angehängt:


mfg

 

[Maik]

Moin,

den kompletten Farbverlauf wirst du wohl kaum wiederholen wollen, sondern dessen unteren abschließenden Farbwert (weiß).

Also deklarierst du neben dieser Grafik als nicht zu wiederholendes Hintergrundbild zusätzlich die entsprechende Hintergrundfarbe für die Box.

mfg Maik

 

[kannaum]

Moin,

den kompletten Farbverlauf wirst du wohl kaum wiederholen wollen, sondern dessen unteren abschließenden Farbwert (weiß).

Ja stimmt.

Also deklarierst du neben dieser Grafik als nicht zu wiederholendes Hintergrundbild zusätzlich die entsprechende Hintergrundfarbe für die Box.

mfg Maik

Ich habe eine Ahnung was du meinst aber ich bin echt kein Css Profi.
Ich probiers mal aber mit einem Beispiel wäre mir echt sehr sehr geholfen.

mfg

 

[Maik]

Kurz und schmerzlos (weiß als untere Schlußfarbe des Farbverlaufs angenommen)

#textBox { 
background: #fff url(pfad/zum/hintergrundbild.jpg) no-repeat 0 0;  /* Hintergrundfarbe - Hintergrundbild - Hintergrundbildwiederholung - Hintergrundbildposition links oben */
}

mfg Maik

 

[kannaum]

ICh will aber nicht den Farbwert sondern ein Bild unten haben.
Sonst sieht man den SChatten nicht.
Ich hänge mal kurz die zwei Bilder an.




mfg


Edit: Das Zweite BIld sieht man wohl nciht sehr gut

 

[Maik]

ICh will aber nicht den Farbwert sondern ein Bild unten haben.
Sonst sieht man den SChatten nicht.

Tja, dass der Schatten die zweite Bilddatei, und so direkter Bestandteil dieser Box ist, hast du in deinem ersten Beitrag mit keiner Silbe erwähnt

Genauso gut, weil technisch denkbar und möglich, könnte ja der linke und rechte Schattenwurf, in einer weiteren Bilddatei vereint, durch ein Hintergrundbild in einem der übergeordneten Elternelemente erzeugt werden.

Hätte ich hier meinen Erstvorschlag mit der Hintergrundfarbe unterbreitet, wenn mir von Beginn an die konkreten Gesetzmäßigkeiten / Zusammenhänge in deinem Konzept bekannt gewesen wäre?

Eben - wohl kaum.

In diesem Fall sind für die zwei Bilddateien (=Hintergrundbilder) zwei ineinander verschachtelte Blöcke vorzusehen.

#textBox erhält das vertikal zu wiederholende Hintergrundbild mit dem linken Schatten, und sein Nachfolgeelement <div>, in dem der zukünftige Text folgt, das nicht zu wiederholende Hintergrundbild mit dem vertikalen Farbverlauf, sowie eine Mindesthöhe, sofern der Textumfang nicht ausreicht, um das Hintergrundbild in seiner Höhe (468px), und damit den Farbverlauf, in vollem Umfang darzustellen.

Auf diese Weise wird der Hintergrund von #textBox zunächst von seinem Kindelement überdeckt, und kommt zum Vorschein, wenn der Inhaltsumfang die eingerichtete Mindesthöhe überschreitet.

<div id="textBox">
  <div>
    <!-- Hier folgt der Text -->
  </div>
</div>

#textBox {
background:url(box2.png) repeat-y;
}
#textBox div {
background:url(box.png) no-repeat;
min-height:468px; /* entspricht der Bilddatei-Höhe */
}

mfg Maik