Skapa en gradientbakgrund i WordPress

Webbdesign med CSS ger dig möjlighet att skapa gradientbakgrunder utan att behöva bildfiler. I WordPress kan du inte direkt applicera en gradient på body-taggen, men du kan lägga en div som omsluter hela sidan. Många teman baserade på CSS‑ramverk har redan en sådan div; om inte kan du enkelt lägga till en själv.

Steg 1 – Navigera till redigeraren

Gå in i wp-admin på din webbplats och logga in på WordPress‑adminpanelen. Välj Utseende > Redigerare. Klicka sedan på header.php under “Mall” för att öppna filen som innehåller body-taggen.

Steg 2 – Lägg till en container‑div

Letar du efter en div med id container direkt under body-taggen i header.php? Om du inte hittar någon, lägg till följande:

<div id="container">

Spara filen genom att klicka på den blåa Uppdatera fil-knappen. Öppna sedan footer.php och lägg till

</div>

just ovanför </body> för att stänga div‑en.

Steg 3 – Lägg till gradienten i style.css

Öppna style.css i redigeraren. Lägg till följande kod längst ner i filen:

#container {
    background-color: #038394;
    background-image: linear-gradient(to bottom, #038394, #00CCCC);
    background-image: -webkit-linear-gradient(top, #038394, #00CCCC);
    background-image: -moz-linear-gradient(top, #038394, #00CCCC);
}

Denna kod ger en fallback‑färg för äldre webbläsare. Tänk på att ange riktningen och två färger som gradvis övergår. Kopiera sedan raden två gånger med WebKit‑ och Mozilla‑prefix för att stödja Chrome, Safari och Firefox.

Klicka på den blåa Uppdatera fil-knappen för att spara style.css. Gradientbakgrunden visas nu på varje sida.

Tips

• Om du ser vit marginal runt gradienten, sätt alla marginaler till noll för #container.