Antworten auf deine Fragen:
Neues Thema erstellen

Wie Container mit unterschiedlichen Hintergrundbildern aubauen?

gegenwind

liebt Pizza.



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

Aktives Mitglied

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.

CSS:
.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

Hat es drauf

Geht einfach und schnell mit CSS3 (Multiple Backgrounds).

HTML:
<div class="example">
<!-- content here! -->
</div>
CSS:
/* --| 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
 
Zuletzt bearbeitet:

Jormungand

VonAllemEtwas

... 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.
HTML:
<div class="outer">
   <div class="inner">... dein Text ...</div>
</div>
CSS:
.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

liebt Pizza.

Danke Leute,
es funktioniert wie erhofft! :)

Nun habe ich ein anderes Problem das damit in Verbindung steht.
Mittels jQuery lass ich diesen Container einblenden.
Javascript:
<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.
 

gegenwind

liebt Pizza.

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

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.612
Beiträge
1.538.343
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben