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

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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.