Perché Cascading Style Sheet, o CSS, codice include sfumature, è possibile aggiungere sfondi sfumati solo CSS ai tuoi siti Web senza alcuna necessità di immagini affettati. In Wordpress, è possibile aggiungere sfondi sfumati CSS al file Style. CSS. Non è possibile applicare la sfumatura al tag body, come si fa per sfondi a tinta unita, ma è possibile utilizzare un div che avvolge l'intero sito Web. Molti temi già costruiti sul Framework CSS includono tali un div, anche se è possibile aggiungere uno se non il vostro tema.

Istruzioni

1

Vai alla cartella "wp-admin" del tuo sito Web e accedere al dashboard di Wordpress. Spostarsi su "Aspetto" e fai clic sul link di "Editor". Fare clic sul collegamento a "header. php" in "Modelli" intestazione per caricare il file HTML contenente il tag body del tuo sito Web.

2

Cercare un div con ID "contenitore" direttamente sotto il tag body del file "header. php". Se non trovate uno, aggiungerne uno. Ecco cosa dovrebbe assomigliare a:

< div id = "container" >

Salvare il file facendo clic sul pulsante "Update File" blu. Se hai aggiunto un div, caricare "footer" nell'editor e aggiungere "< / div >" soprastante "< / body >" per chiudere il div.

3

Caricare "Style. css" nell'editor. Aggiungere questo codice alla parte inferiore del file:

contenitore () {

background-color: #038394;

immagine di sfondo: lineare-gradient(top, #038394, #00CCCC);

immagine di sfondo: - webkit-lineare-gradient(top, #038394, #00CCCC);

immagine di sfondo: - moz-lineare-gradient(top, #038394, #00CCCC);

}

Il codice sopra imposta un fallback per i browser che non supportano le sfumature. L'impostazione "immagine di sfondo" a "linear-gradient" crea lo sfondo sfumato. Almeno, è necessario impostare una direzione per iniziare presso la sfumatura e quindi due colori che sfumano in a vicenda. Aggiungere questa riga di codice ancora due volte, aggiungendo i prefissi Webkit e Mozilla per browser Chrome, Safari e Firefox.

4

Fare clic sul pulsante "Update File" blu per salvare il file "Style. css". Il gradiente di sfondo viene ora visualizzato in ogni pagina del vostro sito Wordpress.

Consigli & Avvertenze

• Impostare tutti i margini a zero per il div "contenitore" Se vedete lo spazio vuoto intorno a gradiente.