So erstellen Sie einen Hintergrund mit Farbverlauf in WordPress

Cascading Style Sheet Webdesign-Code enthält eine Verlaufsoption, sodass Sie Ihren WordPress-Websites nur CSS-Verlaufshintergründe hinzufügen können, ohne geschnittene Bilder zu benötigen. In WordPress können Sie den Farbverlauf nicht wie bei einfarbigen Hintergründen auf das Body-Tag anwenden, aber Sie können einen Div-Container verwenden, der die gesamte Website umschließt. Viele Themes, die auf CSS-Frameworks basieren, enthalten bereits ein solches div, obwohl Sie eines hinzufügen können, wenn Ihr Theme dies nicht tut.

Schritt 1

Gehe zum wp-admin Verzeichnis Ihrer Website und melden Sie sich beim WordPress-Dashboard an. Navigieren Sie zu Aussehen und klicke auf Editor Verknüpfung. Klicken Sie auf den Link zu header.php unter der Überschrift Vorlagen, um die HTML-Datei mit dem Body-Tag Ihrer Website zu laden.

Schritt 2

Suchen Sie nach einem div mit der ID "container" direkt unter dem body-Tag in Ihrer header.php-Datei. Wenn Sie keinen finden, fügen Sie einen hinzu. So sollte es aussehen:

Speichern Sie die Datei, indem Sie auf die blaue Schaltfläche **Datei aktualisieren** klicken. Wenn Sie ein div hinzugefügt haben, laden Sie **footer.php** in den Editor und fügen Sie ** hinzu.

direkt darüber ** zum Schließen des div.

Schritt 3

Belastung style.css im Editor. Fügen Sie diesen Code ganz unten in der Datei hinzu:

Behälter {

Hintergrundfarbe: #038394; Hintergrundbild: linear-gradient(top, #038394, #00CCCC); Hintergrundbild: -webkit-linear-gradient(top, #038394, #00CCCC); Hintergrundbild: -moz-linear-gradient(oben, #038394, #00CCCC); }

Der obige Code legt einen Fallback für Browser fest, die keine Farbverläufe unterstützen. Wenn Sie "background-image" auf "linear-gradient" setzen, wird der Hintergrund mit Farbverlauf erstellt. Zumindest müssen Sie eine Richtung festlegen, in der der Farbverlauf beginnen soll, und dann zwei Farben, die ineinander übergehen. Fügen Sie diese Codezeile noch zweimal hinzu und fügen Sie die Webkit- und Mozilla-Präfixe für Chrome-, Safari- und Firefox-Browser hinzu.

Klicken Sie auf das Blau Update-Datei Schaltfläche, um Ihre style.css-Datei zu speichern. Ihr Verlaufshintergrund erscheint jetzt auf jeder Seite Ihrer WordPress-Website.