Hintergrundbild an Displaygröße anpassen

Wenn man ein zu kleines Bild als Hintergrundbild hochgeladen hat, das Bild aber über den ganzen Bildschirm angezeigt werden soll, kann man eine der folgenden beiden Lösungsmöglichkeiten anwenden:

1. Das Bild gegen eine größere Version tauschen, die man im Bildbearbeitungsprogramm erstellt.
2. Ein CSS-Kommando eingeben, welches das zu kleine Bild proportional stimmig an die Display-Größe anpasst.

Hier im Post wird Möglichkeit 2 beschrieben.

---

Man gehe zu Vorlage > Anpassen > Erweitert > CSS hinzufügen

und füge hinzu:

body {
background-size: cover;
}

"Auf Blog anwenden" klicken, um den Eintrag zu speichern.


Die aktuellen Versionen der Browser Firefox, Chrome, IE, Opera, Safari interpretieren das CSS-Kommando korrekt.

In den Dynamischen Ansichten

Wenn man in den Dynamischen Ansichten ein eigenes Hintergrundbild (nur) für den Body per CSS einträgt, kann man auch dort das oben genannte Kommando nutzen, um ein zu kleines Bild zu stretchen. Eigene Hintergrundilder für den Body sind in den Dynamischen Ansichten jedoch grundsätzlich problematisch, weil sie besonders unter der Ansicht "Sidebar" sehr störend sein können. Wenn Bilder an jeden Screen individuell angepasst werden und man deshalb nicht sicher vorhersehen kann, welcher Bildbereich hinter dem Postbereich von "Sidebar" angezeigt werden wird, ist das Problem besonders groß. Ich rate deshalb vom Stretchen eines Body-Hintergrundbilds in den Dynamischen Ansichten ab.

Link zum Thema

• http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size

Ute Ziemes, sg.utez.de, 2015-02-10, Ergänzung: 2016-02-02