Cascading Style Sheet Webontwerpcode bevat een verloopoptie, zodat u alleen CSS-gradiëntachtergronden kunt toevoegen aan uw WordPress-websites zonder dat u gesegmenteerde afbeeldingen nodig hebt. In WordPress kun je het verloop niet toepassen op de body-tag zoals je zou doen voor effen achtergronden, maar je kunt een div-container gebruiken die zich om de hele website wikkelt. Veel thema's die op CSS-frameworks zijn gebouwd, bevatten al zo'n div, hoewel u er een kunt toevoegen als uw thema dat niet doet.

Stap 1

Ga naar de wp-admin directory van uw website en log in op het WordPress-dashboard. Navigeren naar Uiterlijk en klik op de Editor koppeling. Klik op de link om header.php onder de kop Sjablonen om het HTML-bestand met de body-tag van uw website te laden.

Stap 2

Zoek naar een div met een ID van "container" direct onder de body-tag in je header.php-bestand. Als je er geen vindt, voeg er dan een toe. Hier is hoe het eruit zou moeten zien:

Sla het bestand op door op de blauwe knop **Bestand bijwerken** te klikken. Als je een div hebt toegevoegd, laad dan **footer.php** in de editor en voeg ** toe

recht boven ** om de div te sluiten.

Stap 3

Laden style.css in de redactie. Voeg deze code helemaal onderaan het bestand toe:

houder {

achtergrondkleur: #038394; achtergrondafbeelding: lineair verloop (top, #038394, #00CCCC); achtergrondafbeelding: -webkit-lineair-gradiënt (top, #038394, #00CCCC); achtergrondafbeelding: -moz-linear-gradient (top, #038394, #00CCCC); }

De bovenstaande code stelt een fallback in voor browsers die geen gradiënten ondersteunen. Door "achtergrondafbeelding" in te stellen op "lineair verloop" wordt de achtergrond met kleurovergang gemaakt. U moet op zijn minst een richting instellen voor het verloop om te beginnen en vervolgens twee kleuren die in elkaar overlopen. Voeg die regel code nogmaals twee keer toe, met de voorvoegsels Webkit en Mozilla voor de browsers Chrome, Safari en Firefox.

Klik op de blauwe Bestand bijwerken om uw style.css-bestand op te slaan. Uw verloopachtergrond verschijnt nu op elke pagina van uw WordPress-website.