Mehrere body Pictures

Ap0llinaris · 4. Oktober 2011

Hallo Leute.

Ich bin derzeit etwas mit CSS beschäftigt. (Der Scriptsprache nicht dem Spiel)
Nun bin ich am verzweifeln und mein Tutorial wo ich lerne hilft auch nicht weiter.

Ich würde gerne einen Header nehmen und auf diesen Header ein Header-Design tuhen damit es einen Rand ergibt.
Das mache ich aus folgendem Grund, weil ich dann nicht immer das komplette Design neu designen muss, sondern einfach nur ein Bild erstellen muss und es einfügen muss dann ist es schon fertig.

Ich hoffe ihr könnt mir helfen.

Achja, PS: Derzeit sieht meine CSS-Datei so aus:

Code

body {	background-color: #626261;	background-image: url("header.png");	background-repeat: no-repeat;	background-attachment: fixed;	background-position: 5cm 1cm;	
}
h1 {	background-image: url("designheader.png");	background-repeat: no-repeat;	background-attachment: fixed;	background-position: 5cm 1cm;}
a:link {	color: #000000;}

Bosti · 4. Oktober 2011

Wo ist denn jetzt genau dein Problem? An welcher Stelle hapert es?

Ap0llinaris · 4. Oktober 2011

Ich möchte per CSS 2 Bilder einfügen bzw. auf meiner Homepage als Header präsentieren.
Aber es klappt nur 1 Bild.
Wenn ich jetzt z.B

h1 { background-image: url("designheader.png"); }

mache dann passiert nix.

Immer nur bei body { .. } passiert was.

Sonst nie.

Bosti · 4. Oktober 2011

Mach mal aus deinem h1 ein div. Pack die Größen des Bildes zur Sicherheit in die CSS.
Setz für body z-index:0; und für den anderen div z-index:1

Rafelder · 5. Oktober 2011

Du kannst auch einem Element mehrere Hintergründe zuweisen:

Code

body {
	background-image: url('abc.png'), url('def.png');	
	background-position: top left, top right;
	background-size: usw...
}

Das zuerst genannte ist das oberste Bild, das zuletzt genannte das unterste

breadfish.de 11. März 2022