Gunnar Bittersmann: Hintergrund-Bild nicht mitscrollen

Beitrag lesen

SELF-Forum

Hintergrund-Bild nicht mitscrollen

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

Ich hab es jetzt hinbekommen, dass ich mithilfe des img-Elements ein Hintergrundbild einbinde, das unabhängig von der Bildschirmauflösung immer die gesamte Größe der Anzeigefläche ausnutzt […]

Fabian,
Bildschirmauflösung und Größe der Anzeigefläche sind zwei völlig unterschiedliche Dinge. Das erste von beiden ist für dich völlig irrelevant.

(<img width=100% height=100%...>).

Das ist kein gültiges HTML. Siehe [HTML401@de §3.2.2], beachte die Anmerkung der Übersetzer.

Du kannst die Attribute ganz weglassen und die Angaben auch mit CSS machen.

Nun wäre es aber schön, wenn das Hintergrund-Bild einfach stehen bleiben würde und es so aussieht, als ob nur der Text gescrollt werden würde. Wie mache ich das?

Mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index.

Du musst das Bild dazu außerhalb des Textes haben:

<body>  
  <img id="background" src="foo" alt="" />  
  <div id="content">  
    <h1>Lorem ipsum</h1>  
    <p>Lorem ipsum dolor sit amet</p>  
    <p>Duis autem vel eum iriure</p>  
  </div>  
</body>

Das Bild wird gestreckt und im Hintergrund fixiert:

#background {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  left: 0;  
  top: 0;  
  z-index: 0;  
}

Dem #content gibst du einen höheren z-index, damit dieser aber wirkt, muss dessen http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position-Eigenschaft einen vom Default 'static' der abweichenden Wert haben:

#content {  
  position: relative;  
  z-index: 1;  
}

Live long and prosper,
Gunnar

--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
Beitrag melden
–
Informationen zu den Bewertungsregeln