Das Hintergrundbild verankern
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Das Hintergrundbild soll sichtbar bleiben, auch wenn der Seiteninhalt gescrollt wird.
Lösung
Verwenden Sie die Eigenschaft background-attachment mit dem Wert fixed wie hier gezeigt:
body {
background-image: url(bkgd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}Diskussion
Mit Hilfe dieser Technik können Sie das Hintergrundbild an einer bestimmten Position fest verankern. Selbst wenn der Besucher die Seite scrollt, bleibt das Bild im Browserfenster sichtbar, wo Sie es positioniert haben. Ein weiterer möglicher Wert für background-attachment ist der Standardwert scroll. Selbst wenn Sie diesen Wert nicht ausdrücklich festlegen, wird das Bild mit dem übrigen Inhalt bewegt.
Vielleicht wollen Sie auf Ihrer Webseite ein Foto einer kürzlich unternommenen Reise einstellen. Dieses Bild soll links auf der Seite angezeigt werden, während der Text rechts steht. Auch wenn der Leser mehr über Ihre Reise liest (nach unten scrollt), bleibt das dazugehörige Bild an seiner Position, wie in der folgenden Abbildung zu sehen ist. Hier der nötige Code:
body {
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -125px 75px;
margin: 75px 75px 0 375px;
}
h1, h2, h3 {
padding-top: 0;
margin-top: 0;
text-transform: uppercase;
}
p {
text-align: justify;
}
Abbildung: Das Foto bleibt an seinem Platz, auch wenn der Benutzer scrollt.
Noch interessanter wird die Sache, wenn Sie Hintergrundbilder für andere Block-Elemente als body verankern. Probieren Sie das beispielsweise einmal mit Überschriften für eine Film- oder Konzertkritik. Mit der folgenden CSS-Regel können Sie Ihren Lesern zu einer interessanten Surf-Erfahrung verhelfen:
h1, h2, h3 {
font-size: 200%;
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1.5em;
text-align: center;
color: white;
}Aufgrund der Innenabstände und der hellen Farbe für die Überschriften-Elemente gibt es nicht genügend Platz, um das Bild "durch" diese Elemente zu sehen und gleichzeitig die Überschriften lesen zu können. Beim Scrollen durch die Rezension sieht der Benutzer den Rest des Bildes (siehe nächste Abbildung).
Abbildung: Das Foto "scheint" durch die Überschriften, aber nicht durch das body-Element hindurch.
Bei Drucklegung dieses Buches wurde die Verwendung von fest verankerten Hintergrundbildern für andere Block-Level-Elemente als body (wie die in dieser Lösung verwendeten Überschriften-Elemente) nur von Mozilla, Netscape 6+, Internet Explorer 7 und Safari unterstützt. Internet Explorer 5.x und 6 für Windows wiederholen das Hintergrundbild in jeder Überschrift.
Siehe auch
- Das Rezept Hintergrundbilder positionieren zur Positionierung von Hintergrundbildern,
- das Rezept Hintergrundbilder in Internet Explorer 6 für Windows verankern für einen Hack, mit dem die mangelnde Unterstützung von Internet Explorer für Windows für den Wert background-fixed umgangen werden kann und
- die CSS 2.1-Spezifikation zur Eigenschaft background-attachment.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln