Internetseiten werden mithilfe der HTML-Sprache aufgebaut, zum Formatieren und Gestalten nimmt man jedoch sogenannte Cascading Style Sheets, kurz CSS. Dies hat den Vorteil, dass man die Styles, die auf jeder Seite vorkommen, in einer externen Datei definieren kann, die man dann auf jeder Internetseite nur referenzieren muss. Außerdem läßt sich über CSS das Design einer Internetseite sehr schnell komplett ändern, weil man nur die eine CSS Datei ändern muss. Natürlich können Sie auch in jeder Datei direkt CSS-Angaben machen. Hier erfahren Sie, wie man ein Hintergrundbild strecken kann. Diese Information müssen Sie im Header einer HTML, daher sollten Sie sich ein wenig mit dem HTML-Code auskennen. Außerdem sollten Sie beachten, dass das Strecken erst seit CSS3 möglich ist, also von sehr alten Browsern nicht unterstütz wird.
So strecken Sie das Hintergrundbild mit CSS
- Öffnen Sie eine Code-Ansicht Ihrer HTML Datei.
- Fügen Sie vor dem abschließenden "" eine neue Zeile "body (" ein.
- Dann eine weitere neue Zeile mit "background: url(Ihre_Bilddatei) no repeat;". Bei "Ihre_Bilddatei" geben Sie den (relativen) Pfad zum Bild an. Vergessen Sie nicht das Semikolon hinter "repeat".
- In einer neuen Zeile schreiben Sie "background-size: 100%;", die Standard CSS Definition, die ab Firefox 4 und Opera 10 funktionieren sollte.
- Für den Internetexplorer ab Version 9 gilt "-ms-background-size: 100%;". Dies schreiben Sie in eine weitere neue Zeile.
- Fügen Sie dann für die Verwendung mit dem alten Firefox, Seamonkey (Geckos) folgenden Code in eine neue Zeile ein: "-moz-background-size: 100%;" (alles innerhalb der Anführungszeichen).
- In der nächsten Zeile schreiben Sie: "-webkit-background-size: 100%;" für Safari und Chrome/Iron.
- Dann kommt eine weitere Zeile mit: "-o-background-size: 100%; " für Opera 9.
- Nun schließen Sie in einer weiteren Zeile den CSS Block mit einer beendenden geschweiften Klammer "}". Und schon können Sie die HTML-Datei speichern und testen.
Folgende Punkte sollten Sie beachten
- Anstelle von 100% können Sie je nach Belieben auch andere Prozentwerte verwenden.
- Das Bild wird immer in der Breite auf diesen Wert gestreckt und die Höhe entsprechend mit, es ist nicht möglich, nur Breite oder Höhe zu strecken.
- Hochformatige Bilder, die Sie auf die komplette Breite strecken, sind demnach unten abgeschnitten.
- Bilder, die beim Strecken vergrößert werden, können je nach Auflösung natürlich teilweise stark verpixeln.
- Bilder, die eigentlich eine größere Auflösung haben und durch das Strecken bzw. Verkleinern auf das gewünschte Maß gebracht werden, erleiden zwar keinen Qualitätsverlust, beachten Sie jedoch, dass zu große Bilder länger beim Laden brauchen.
Wenn Sie einmal erfolgreich ein Hintergrundbild mit CSS gestreckt haben, wird Ihnen das in Zukunft immer wieder gelingen.
Wie hilfreich finden Sie diesen Artikel?
