DIV in den Hintergrund bringen

[Ollli]

Hallo,

ich bin so langsam wirklich am Verzweifeln. Ich  habe auf meiner HP eine Grafik, die ich als Hintergrund eines DIVs in die Seite positioniere. Das ist ein reines Designelement und kann so nicht als normale Hintergrundgrafik eingebunden werden, weil es innerhalb eines anderen DIVs an eine bestimmte Position soll. Da das jetzt alles ziemlich verwirrend klingt ein Beispiel.

<div style="background-color: black; color: yellow; z-index: 1;">
 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
 <div style="background: no-repeat url('img/schlumpf.jpg'); top: 25px; left: 25px; width: 50px; height: 50px; position: absolute; z-index: 2;"></div>
</div>

Ergebnis: http://img4.myimg.de/doofc7748.png

Wie man in dem Bild hier erkennt, liegt die Grafik aber über dem Text. Ich hätte das gerne anders rum, dass der Text über die Grafik fließt. Hat jemand einen heißen Tipp für mich?

[ChrisB]

Hi,

Ich  habe auf meiner HP eine Grafik, die ich als Hintergrund eines DIVs in die Seite positioniere. Das ist ein reines Designelement und kann so nicht als normale Hintergrundgrafik eingebunden werden, weil es innerhalb eines anderen DIVs an eine bestimmte Position soll.

Und warum  kannst du es nicht eben diesem Element als Hintergrundbild verpassen, und entsprechend positionieren?

Da das jetzt alles ziemlich verwirrend klingt ein Beispiel.

Das macht's kaum besser, eher noch verwirrender.

<div style="background-color: black; color: yellow; z-index: 1;">
text text text text text text text text text text text text text text

Abgesehen davon, dass z-index ohne Positionierung keine Wirkung hat, sollte das wohl ein P statt eines Divs sein, wenn es Fliesstext enthaelt.

<div style="background: no-repeat url('img/schlumpf.jpg'); top: 25px; left: 25px; width: 50px; height: 50px; position: absolute; z-index: 2;"></div>

Wie man in dem Bild hier erkennt, liegt die Grafik aber über dem Text.

Hier darf z-index jetzt wirken, weil das Element positioniert ist.
Du hast es auf der z-Achse weiter nach vorn legen lassen - und wunderst dich jetzt, dass es weiter vorne ist als der Text ...?

MfG ChrisB

[Tastenputzer]

Hallo ChrisB,

durch das Benutzen der z-index baust Du ja verschiedene Ebenen auf, das ist so wie bei Folien, die übereinander liegen.

Unten liegt die kleinste Zahl, in diesem Fall z-index:1

Der Text, den Du schreibst dazu, liegt also auch auf eins, und wird logischerweise von deinem Bild verdeckt.

Wenn Du also den Text sehen möchtest, kannst du es zum Besipiel versuchen mit einer dritten Ebene z-index:3,

Ich hoffe, du verstehst was ich meine. Ds ist sicherlich nicht dfie eleganteste Lösung, aber hilft erstmal verstehen.

Frohes Fest noch
Edgar

Professionelle Internetauftritte Kostenloser Homepagetest