Wie Container mit unterschiedlichen Hintergrundbildern aubauen?

[gegenwind]

Hallo Leute,
wie würdet ihr so ein Ding in CSS aufbauen?
Bislang habe ich immer drei verschiedene DIVs angelegt.

.verlauf-oben {
}
.text-bereich {
}
.verlauf-unten {
}

Allerdings ist mein Problem, dass mein Text auch über die Verlauf-Texturen gehen sollen.
Wie löst man sowas am elegantesten?

Die Textur soll nicht wiederholt werden, sie soll nur mittig dargestellt werden (border-image fällt deshalb raus).

Danke!

 

[dn3d_fanboy]

Mit CSS3 könntest du daraus eine Div-Box machen und zwei Hintergrundbilder vergeben. Die Mitte ist ja, wie ich sehe nur eine einheitliche Farbe.

.box {
background: url(dots/1.png) no-repeat center top,
url(dots/2.png) no-repeat center bottom;
background-color: #123456 /*Hintergrundfarbe d. Mitte*/
}

Ich habe es jetzt zwar nicht getestet, sollte aber funktionieren.
Quelle: http://www.intensivstation.ch/css3/multiple-backgrounds/

 

[patrick_l]

Geht einfach und schnell mit CSS3 (Multiple Backgrounds).

<div class="example">
<!-- content here! -->
</div>

/* --| Kurze Schreibweise |----- */
.example {
    background:#900 url(img/example1.jpg) no-repeat left top, url(img/example2.jpg) no-repeat left bottom;
}

/* --| Lange Schreibweise |----- */
.example {
    background-color:#900;
    background-image: url(img/example1.jpg), url(img/example2.jpg);
    background-repeat: no-repeat;
    background-position:left top, left bottom;
}

Liebe Grüße, Patrick

 

[Jormungand]

... und wenn du kein CSS3 verwenden willst, machst du zwei ineinander verschachtelte Container, bei denen der innere das eine Hintergrundbild verwendet und der äußere das zweite Bild und eine Hintergrundfarbe.

<div class="outer">
   <div class="inner">... dein Text ...</div>
</div>

.outer {
   background:#ff6633 url(bild1.jpg) no-repeat left top;
}
.inner {
   background: url(bild2.jpg) no-repeat left bottom;
}

Da musst du aber drauf achten, dass das die Container gleich breit sind und das drüberliegende Bild die Hintergrundfarbe verdeckt.

 

[gegenwind]

Danke Leute,
es funktioniert wie erhofft!

Nun habe ich ein anderes Problem das damit in Verbindung steht.
Mittels jQuery lass ich diesen Container einblenden.

<script type="text/javascript">

    $(document).ready(function(){
        $("#button").click(function(){ // trigger
            $(".second-txt-layer").toggle( "blind", "easeOutQuart", 500 );
        });
    });
</script>

Mein Problem: Das untere Hintergrundbild erscheint erst, wenn der Div komplett aufgeklappt ist. Ich hätte es sehr gerne, dass das Hintergrundbild immer am unteren Ende des Divs hängt.
Am Anfang sollen sich also beide Texturen überlappen. Gibt es dafür eine einfache Lösung oder wird es da schon sehr intensiv?



Dieses Bild zeigt einen Schnappschuss aus der Animation (Klapptext bei 10%). Am unteren Rand hätte ich gerne die Hintergrundtext sofort und nicht erst, wenn der Div bei 100% ist.

 

[dn3d_fanboy]

Verstehe ich jetzt nicht so genau was du jetzt machen möchtest.
Hast du mal einen Linke zu der Seite?

 

[gegenwind]

Hallo dn3d,
das Projekt muss ich nur auf einem Browser zum laufen bekommen. Die Seite läuft nur unter Chrome so richtig.

Das ist der Link:


Wenn man auf exotischen Ländern klickt, dann geht der Effekt los. Der Schatten ganz unten erscheint erst gegen Ende, ich möchte, dass der immer an der Unterkante ist beim aufklappen.

 

[dn3d_fanboy]

Also mit FF und Chrome läuft es bei mir gleich gut. Aber ich bin mir immer noch nicht sicher, ob ich verstanden habe, was du meinst.

Soll das untere Ende zuerst aufklappen? Sprich der ganze Kasten klappt runter und dann sieht man erst den Anfang des Text?
Ich bezweifel jetzt einfach mal, dass das besser aussehen wird.