Um ein Hintergrundbild in Ihrem Tumblr-Blog-Theme zu zentrieren, bearbeiten Sie eine einfache Zeile CSS-Code in der HTML-Codepage des Blog-Themas. Ziehen Sie in Erwägung, ein Hintergrundbild zu verwenden, das den Hintergrundbereich ohne Wiederholung oder „Kacheln“ ausfüllt. Die Hintergrundbildfunktion im standardmäßigen Tumblr Redux-Thema kachelt standardmäßig Hintergrundbilder. Sie können die Kachelung deaktivieren und das Hintergrundbild zentrieren, indem Sie dieselbe CSS-Anweisung bearbeiten. Beachten Sie, dass Sie das Bild sowohl vertikal als auch horizontal zentrieren können.
Öffnen Sie Tumblr und klicken Sie auf den Pfeil neben Ihrem Blognamen, um eine Liste aller Ihrer Blogs anzuzeigen. Klicken Sie im Popup-Dialogfeld auf den zu bearbeitenden Blog. Um Ihr primäres Blog-Thema zu bearbeiten, fahren Sie mit dem nächsten Schritt fort.
Klicken Sie auf die Registerkarte „Anpassen“, um das ausgewählte Thema im Bearbeitungsmodus zu öffnen.
Klicken Sie im Abschnitt „Hintergrundbild“ des Bedienfelds „Anpassen“ auf das Symbol „Hochladen“, navigieren Sie dann zum Hintergrundbild und klicken Sie darauf. Klicken Sie auf „Öffnen“, um das Bild hochzuladen.
Klicken Sie auf den Link „HTML bearbeiten“, um den Theme-Editor zu öffnen.
Drücken Sie „Strg-F“, um das Tool zum Suchen und Ersetzen zu öffnen. Geben Sie „Hintergrund“ ohne Anführungszeichen in das Eingabefeld ein. Klicken Sie auf den Abwärtspfeil, um die folgenden Codezeilen zu finden:
body { background: {color:Background} url('{image:Background}') oben links feste Wiederholung;
Ändern Sie die Werte der Hintergrundeigenschaft von „fixe Wiederholung oben links“ in „Mitte ohne Wiederholung“. Die erste Instanz von „center“ zentriert das Bild vertikal. Die zweite Instanz zentriert das Bild horizontal. Vergessen Sie nicht das Semikolon am Ende der Anweisung.
Klicken Sie auf die Schaltfläche „Vorschau aktualisieren“, um das Hintergrundbild im Vorschaufenster anzuzeigen.
Klicken Sie auf „Speichern“, um die Codeänderungen zu speichern, und klicken Sie dann auf das Symbol „Beenden“, um den Editor zu schließen und zur Hauptseite Ihres Blogs zurückzukehren.
Tipps
Sie können eine Code-Kurzform für die Zeile „No-Repeat Center Center“ verwenden, wenn Sie Ihr Hintergrundbild sowohl horizontal als auch vertikal zentrieren möchten. Wenn ein "Center"-Wert weggelassen wird, wird ein Wert von "Center" impliziert. Sie können einfach "No-Repeat Center" verwenden, um das Bild sowohl vertikal als auch horizontal zu zentrieren.
Die Zeile „no-repeat top center“ zentriert das Bild horizontal und richtet das Bild am oberen Seitenrand aus.
