Zwei BGbilder übereinanderlegen

masterb44hz · 14.02.2009

Hallo.. ich hab nen ziemliches "dummes" Problem.

Und zwar habe ich für meine neue HP den BG so gestaltet, dass es zum einen einen Farbverlauf gibt (1. BG Bild) und dann noch ein 1024x768 overlay, teilweise transparent, das dem BG noch ein wenig stil verleihen soll (2. BG Bild). Damit habe ich jetzt zwei Probleme:

1. Wie bekomme ich die beiden übereinander? div-tags wollen nicht ganz und im body will auch nur ein BG bild angegeben sein!?
2. Wie schaffe ich es, dass sich das Overlaybild bei einer unterschiedlichen Bildschirmgröße z.B. 1280x800 dem anpasst, z.B. durch strecken?

Danke für eure Hilfe. Ich freue mich über Antworten

Gruß

Top_Gun · 14.02.2009

AW: Zwei BGbilder übereinanderlegen

masterb44hz schrieb:
1. Wie bekomme ich die beiden übereinander? div-tags wollen nicht ganz und im body will auch nur ein BG bild angegeben sein!?

Du erstellst ein div mit 100% Höhe und Breite, in dieses div packst du nachher alles andere hinein. Wichtig ist, dass zwischen body und dem div nichts weiter ist.
Das erste Hintergrundbild definierst du für den body das zweite für das div und schon liegen beide Bilder übereinander. Das zweite Hintergrundbild kannst du über CSS auch eine Position zuweisen...

masterb44hz schrieb:
2. Wie schaffe ich es, dass sich das Overlaybild bei einer unterschiedlichen Bildschirmgröße z.B. 1280x800 dem anpasst, z.B. durch strecken?

Ein Strecken der Hintergrundbilder ist, soweit ich weiß, nicht möglich.

waterwebdesign · 14.02.2009

AW: Zwei BGbilder übereinanderlegen

Das der Hintergrundbilder nicht. Aber normale Bilder kannst du mit den width:100%; strecken. Damits nicht zu extrem wird, kann man auch noch eine minimale bzw. maximale Weite angeben.

partyartie · 14.02.2009

AW: Zwei BGbilder übereinanderlegen

du kannst mit css den bildern einen z-index zuweisen der dann sagt auf welcher ebene das bild liegt. damit kannst du ein bild über das andere drüber legen.

beispiel:

Code:

<head>
			[...]
			#ebene1 {
			position:absolute; 
			top:10px; 
			width:100px; 
			height:100px;
			z-index:1;
			}
			
			#ebene2 {
			position:absolute; 
			top:15px; 
			width:100px; 
			height:100px;
			z-index:2;
			}
			[...]
			</head>
			
			<body>
			[...]
			<div id="ebene1">Ein Layer></div>
			<div id="ebene2">Anderer Layer</div>
			[...]
			</body>

gruß artur

masterb44hz · 15.02.2009

AW: Zwei BGbilder übereinanderlegen

Super, dass hat schon mal ziemlich geholfen

Trotzdem habe ich das 2. Problem immernoch. Hier noch einige weitere Infos dazu:

CSS:

Code:

#all {
    height:100%;
    width:100%;
}

#bg {
    max-height:150%;
    max-width:150%;
}

index.php:

Code:

<div id="all">
    <div id="bg">
    <img src="images/bg.png" />
    </div>
</div>

Das sind jetzt mal meine codeschnipsel. Das image ist 1024x768 und wird dann auch in dieser Größe ausgegeben. Das Problem ist, dass ich das aber auf eine 1280x800 Auflösung ähnlich wie auch eine 1024x768 Auflösung haben möchte. Wie bekomme ich das hin? Weiter slicen ist nicht wirklich möglich.

Danke

partyartie · 15.02.2009

AW: Zwei BGbilder übereinanderlegen

hast du schonmal versucht das bild im css code einzufügen anstatt im div selber. vielleicht wirkt sich deine größenangabe ja nur auf das div aus und nicht auf den inhalt.

Code:

#bg {
         background-image: url(images/bg.png);
         width: 100%;
         height: 100%;
        }

gruß artur

waterwebdesign · 15.02.2009

AW: Zwei BGbilder übereinanderlegen

masterb44hz schrieb:

CSS:

Code:

#all {
    height:100%;
    width:100%;
}

#bg {
    max-height:150%;
    max-width:150%;
}

index.php:

Code:

<div id="all">
    <div id="bg">
    <img src=" images/bg.png" />
    </div>
</div>

Also, eine max-width von 150% bringen dir nichts, denn das Div kann ja nur 100% des Fensterss einnehmen. ist doch irgendwie logisch oder?

Diese max-/min-width-Angaben braucht zudem nicht das Div, sondern das Bild selbst.

Code:

img
 {width:100%;
 min-width:800px;
 max-width:1280px;}

Was der Browser nun macht ist folgendes: Ohne min/max würde das Bild 100% des zur Verfügung stehenden Platzes einnehmen, aber durch die obere Grenze wird es maximal 1280px breit. Wird das Fenster verkleinert und der Bereich kleiner als 800px erscheint ein Scrollbalken.
Das funktioniert natürlich nur, wenn vorher allen übergeordneten Elementen 100% Breite zugewiesen wurde.

@partyartie: In diesem Falle würde das Hintergrundbild in der festen Größe von 1024x768px bleiben und bei entsprechend großen Fenstern gekachelt werden.

partyartie · 15.02.2009

AW: Zwei BGbilder übereinanderlegen

@waterwebdesign: danke für die info! könnte ich das kacheln nicht mit no-repeat verhindern?

gruß artur

waterwebdesign · 15.02.2009

AW: Zwei BGbilder übereinanderlegen

Ja, kannst du damit verhindern.

Code:

#bg
 {background-image:url(images/bg.png);
 background-repeat:no-repeat;}

masterb44hz · 16.02.2009

AW: Zwei BGbilder übereinanderlegen

Super, danke für euer Antworten. Bin auch schon soweit gekommen, dass sich das in der Breite automatisch anpasst. Aber bei der Höhe will das noch nicht so. Ideal wäre es wenn es bei ganz normaler Browseransicht (je nach Auflösung, aber bei mir jetzt 630px) in der Höhe gestaucht wird und bei Vollbild (bei mir 800px) entsprechend gestreckt wird. Ist das möglich, und wenn ja wie?

Habe das schon so wie für die Breite beschrieben probiert, jedoch ohne Erfolg.:uhm:

EDIT: Gibt es sonst irgendeine Möglichkeit den Hintergrund jeweils der Bildschirmgröße anzupassen?

EDIT2: Hat sich geklärt. Nochmal danke für eure Hilfe.