Hintergrundbild mit position:fixed
0 0 0 
Felix Riesterer
0 0 Felix Riesterer
0
0 Felix Riesterer
Hintergrundbild mit position:fixed
Ich moechte auf einer Homepage ein Hintergrundbild sehr großes Hintergrundbild so einbauen, dass das Bild automatisch auf die Fenstergroesse des Browsers verkleinert wird und sich beim Scrollen nicht bewegt.
Eigentlich nichts sonderlich Ausgefallenes... Im Forum habe ich bereits diesen Thread gefunden
http://forum.de.selfhtml.org/archiv/2007/2/t146303/#m949633
Leider komme ich weder mit der dortigen vorgeschlagenen Methode noch mit meinem ersten Versuch (JS + CSS) nicht wirklich weiter. Anstelle, dass mein Text vor dem Hintergrundbild angezeigt wird, ueberdeckt mein Hintergrundbild diesen.
Hier der Auszug aus meiner aktuellen Seite:
<body text="#FFFFFF" bgcolor="#000000" style="position:static; z-index:2;">
<h1>Text</h1>
<img src="verylarge.jpg" style="position:fixed; top:0; left:0; height:100%; width:100%; z-index:1;" />
</body>
Waere fuer jeden Denkanstoß dankbar, da ich einfach nicht sehe, was ich falsch mache. :)
-
Nabend!
Du gibst deinem 'Hintergrundbild' nen z-index von 1. Wo liegt denn der z-index deines Textes? Nicht bei 2. Du gibst dem body einen z-index von 2. Alle darin enthaltenen elemente liegen damit definiv auf z-index 2 in der Ebene in der sich dein body befindet. Neben einem body ist aber selten noch etwas anderes im html bereich. Jedenfalls nichts was man sieht.
Du hast also erfolgreich deenen Body vor den head geschoben! Das war aber nicht, was Du wolltest...
-
Ich habe es ausprobiert und den h1-tag mit style="position:static; z-index:3" versehen. Allerdings ohne, dass sich etwas geaendert hat.
Auch kann ich deine Aussage so nicht nachvollziehen.
Laut Selfhtml-Eintrag auf http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index heisst es: "Die Schichtposition orientiert sich darüber hinaus an der des Elternelements." Das Elternelement von <h1> ist <body>. <body> hat den z-index von 2. Somit sollte auch <h1> einen z-index von 2 haben, oder sehe ich das falsch?
Was mich jetzt etwas verwirrt ist deine Aussage, dass ich den body vor den head geschoben haben soll. Soweit ich das bisher verstehe, hat CSS keinerlei Auswirkungen auf die head-Elemente.
-
Lieber Stefan,
Was mich jetzt etwas verwirrt ist deine Aussage, dass ich den body vor den head geschoben haben soll.
viel interessanter war aber doch das, was Du gerade _nicht_ getan hast. Hast Du das (war zwischen den Zeilen) auch gelesen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ich mag ja den Wald vor lauter Baeumen nicht sehen oder aber wir reden gerade extremst aneinander vorbei. Mein Body (und damit auch alle Elemente innerhalb des Bodies) sollten, sofern nicht anders explizit angegeben, den z-index 2 haben. So auch das verwendete h1-tag, welches den Text darstellt.
Anders das img tag, welches explizit den z-index 1 hat und damit im "Hintergrund" stehen sollte.
Soweit jedenfalls meine Absicht. Ich habe schon mit diversen z-index-Varianten rumgespielt (mein erster Versuch war es dem body keinen z-index zu geben und stattdessen dem h1-tag den z-index:2 und das img-tag in einem verschachtelten div-tag mit dem z-index:1 zu versehen.
Was ich nun "_nicht_ getan" habe, entzieht sich wirklich meiner Aufmerksamkeit. Koenntest du da vielleicht fuer mich statt mit dem Zaunpfahl mit nem Baumstumpf winken? :)
Waere dir wirklich sehr dankbar.
-
Lieber Stefan,
Koenntest du da vielleicht fuer mich statt mit dem Zaunpfahl mit nem Baumstumpf winken? :)
so krude, wie ich das Ganze finde, so denke ich doch, dass Du so am Besten fährst:
<body> <div id="hintergrund"><img src="../irgendwas.jpg" alt="" /></div> <div id="eigentliche_seite"> ... </div> </body>Nun positionierst Du beide Divs absolut, setzt beide auf left:0 und top:0 (wodurch sie automatisch zum Überlappen kommen) und gibst ihnen volle Breite und Höhe.
Da das Hintergrund-Div im Quelltext zuerst steht, kommt es automatisch unter das andere Div.
Wo braucht es jetzt noch einen z-index?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Tausend Dank. Nach deiner wirklich guten Erklaerung hab ich's dann nochmal versucht und auch meinen Fehler finden koennen. h1 mit dem style position:strict zu versehen war mein Fehler. :)
Stefan
-
Hi!
Tausend Dank. Nach deiner wirklich guten Erklaerung hab ich's dann nochmal versucht und auch meinen Fehler finden koennen. h1 mit dem style position:strict zu versehen war mein Fehler. :)
hmpf. :( Dann hab ich ja wieder alles umsonst geschrieben. Aber schoen, dass Du's jetzt hast. :)
-
-
-
Hallo!
hehe. Neben einem body gibts leider keine anderen Elemente. Lies doch SelfHTML nochmal genauer durch.
Beispiel:
Du hast 2 Divs in deinem body. Jedes Div enthaelt ein P. Das erste Div bekommt einen z-index von 2. Wenn Du jezt die Divs sich ueberlagern laesst, liegt das erste immer ueber dem 2. Verdeckt natuerlich auch das P. Soweit klar.
Elemente vererben ihren z-index auf die Kindelemente heisst: Wenn du jetzt dem P im 2. Div einen z-index von 10 gibts liegt es immer noch hinter dem ersten Div mit dem z-index von 2. Ganz einfach weil alle Elemente im 2. Div auf der Ebene der Divs unter dem ersten liegen.z-index sortiert also nur innerhalb des Elternelements. deshalb ist es egal was du body fuer einen z-index gibst. Damit sagst Du nur das body und alle seine Kindelemente vor allem anderen auf dieser Ebene liegen. Und was liegt denn ausser body noch im HTML Element? Eigentlich nichts ausser eben der Header. Kleiner Witz, ok?
Schau dir mal das Beispiel von SelfHTML an.
-
-
-
-
-
Lieber Stefan,
<body text="#FFFFFF" bgcolor="#000000" style="position:static; z-index:2;">
<h1>Text</h1>
<img src="verylarge.jpg" style="position:fixed; top:0; left:0; height:100%; width:100%; z-index:1;" />wo war doch gleich das "Hintergrund"-Bild? Ich sehe keines. Ich sehe dafür aber ein Inhaltsbild (das <img>)... Hintergrundbilder stehen aber nicht im HTML, sondern im CSS; und wenn doch, dann nur in inline-Styles.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Das Problem mit "herkoemmlichen" Hintergrundbildern (sei es mit de m background="" Attribut im body Tag oder ueber CSS mit background-image:"" ist, dass zu grosse Bilder einfach abgeschnitten werden. Ich moechte allerdings, dass das Hintergrundbild komplett zu sehen ist und sich an die Groesse des Anzeigebereichs anpasst.
Soweit ich das in dem oben genannten Thread gelesen habe, gibt es derzeit keine Moeglichkeit, dies direkt mit CSS zu machen und soll erst mit CSS 3 Einzug erhalten.
Darum mein versuchter "Umweg" ein img-Tag zu verwenden und damit das Verhalten eines Hintergrundbildes nachzuahnen (fixe Position, Groesse auf Anzeigebereich erweitern).
Oder verstehe ich deine Antwort falsch?
-