Op bepaalde WordPress websites kan het qua design passen om een achtergrond te laden. Regelmatig gebruiken wij dit met een sterk vervaagde achtergrond zodat de achtergrond puur voor het design is en niet de aandacht wegtrekt.
Als voorbeeld nemen we de website van Tim’s Verhuurbedrijf uit Gouda die wij mochten bouwen. Op de homepage vind je een afbeelding terug achter een tekstvlak. Dit losten wij op met CSS.
CSS achtergrond laden
Het tekstblok waar de achtergrond achter geplaatst is heeft de class tekst-achtergrond meegekregen. Door een ::after te gebruiken met een background url valt de afbeelding netjes achter de tekst.
Met de opacity optie zorgden wij voor transparantie en daarnaast positioneerden wij met verschillende opties de afbeelding.
De z-index zorgt ervoor dat de afbeelding altijd helemaal onderaan ligt, zodat het niet bovenop de tekst komt te liggen.
.tekst-achtergrond::after {
content: "";
background: url(https://jouwwebsite.nl/wp-content/uploads/de-afbeelding.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}Op deze manier kun je onafhankelijk van je WordPress thema een achtergrond laden.