Mit CSS 2 Hintergründe übereinander legen

M

Marcs

Legendäres Mitglied
Hallo,

Wie würdet ihr das lösen um ein CSS Background mit einem anderen CSS Background zu kombinieren bzw. welche Möglichkeiten kennt ihr?
Ich habe mir überlegt ein neues Div zu erstellen, finde das aber etwas unschön.. gibt es irgend einen Befehl um Ebenen zu definieren? (Also Ebene 1, 2, 3)..

Bzw. wie bringe ich 2 Backends übereinander (eines vorne, eines hinten?).

Gruss Marc
 
Hm,

was sind denn das für 2 Hintergründe? 2 Farben oder 2 Bilder oder gemischt?

Farbe und Bild geht bzw. so:

QUOTE background: #F90 url(../dein/pfad/datei.png);


Ansonsten vielleicht mit position: absolute und dem z-index Attribut


MfG TTlong
 
Ich möchte 2 Grafiken übereinander legen
wink.gif
... das mit dem Background wäre ja simpel...
 
Hallo,

Ich möchte das wie im Anhang realisieren.

Also eine Grafik vorne (Weisser Hintergrund + Rand mit Transparenz als gif).
Hinten dann eine Grafik als PNG.

QUOTE so in etwa : Pastebin


Wie definierst du was vorne und was hinten ist? Ich kapiere das ehrlich gesagt gerade nicht auf den ersten Blick, da du ja einen Teil im Header und den anderen Teil im Body hast.

Anhang anzeigen 2

 
du kannst auch die Variante mit z-index nachgehen, wie TTlong schon sagte


so in etwa Pastebin


z-index:1 ist der Hintergrund

z-index:2 was im Vordergrund stehen soll
 
QUOTE (Marc Schuler @ Di 27.10.2009, 11:34) Hallo,

Ich möchte das wie im Anhang realisieren.

Also eine Grafik vorne (Weisser Hintergrund + Rand mit Transparenz als gif).
Hinten dann eine Grafik als PNG.


Das mit dem weissen Hintergrund wird ja mit Sicherheit ohnehin in einem DIV sein, richtig? Und das blaue ist das auf jeder Seite als Background?

Du könntest ja für das DIV mit dem weissen Background ganz normal per CSS ein Image zuweisen

#whiteDIV {
background: url(../grafik.gif);
}

und eines "global" für die gesamte Seite (das blaue Bild)

body {
background: url(../grafik.png);
}


Gruß TTlong
 
Habe das jetzt ausprobiert.
Aber aus irgend einem Grund lädt er nur die Hintergrunddatei aus backend2.css, welche kleiner ist als bei backend1.css

Mein Header im Mainfile:
CODE <link rel="stylesheet" type="text/css" href="backend1.css">
<link rel="stylesheet" type="text/css" href="backend2.css">


Meine backend1.css

CODE @charset "utf-8";
/* CSS Document */
body {
margin-top: 0px;
left: 50%;
margin-bottom: 120px;
background-position: bottom center;
background-repeat: no-repeat;
background-image: url(images/wis_a2.png);
z-index: 1;
}



Meine backend2.css

CODE @charset "utf-8";
/* CSS Document */
body {
margin-top: 0px;
left: 50%;
margin-bottom: 120px;
background-position: bottom center;
background-repeat: no-repeat;
background-image: url(images/wis_bgw.png);
z-index: 2;
}


Was habe ich falsch gemacht?
blink.gif
 
Du hast body{} 2 mal definiert. Es wird bei CSS-Deklerationen immer die zuletzt definierte geladen bzw. die erste überschrieben.

QUOTE
@charset "utf-8";
body {
/* Blauer Hintergrund*/
background-image: url(images/blau.png);
}

#whiteDIV {
/* Weisser Hintergrund */
width: 700px;
margin: auto;
background-image: url(images/weiss.png);
}


body{} hat im Übrigen keinen z-index.


MfG TTlong
 
Aber weglassen darf ich es ja auch nicht ganz sonst lädt er überhaupt nichts.
Was soll ich jetzt machen?
wacko.gif
 
Hi, deine Datei kann man (leider) nicht runterladen... der möchte immer eine index.php runterladen mit dem Inhalt Rar!..
wink.gif
 
CODE

{background-image: url(../images/bg.gif);z-index:0;}
#oben
{background-image: url(../images/bg2.gif);z-index:1;}




müsste alles gehen mit

z-index:1oder2 oder 3;
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben