CSS gradient over een background image in Avada

In webdesign is het soms gewenst om een gradatie-effect over een afbeelding te plaatsen om zo de leesbaarheid van tekst te verbeteren of om een bepaalde visuele esthetiek te bereiken. Het thema Avada voor WordPress maakt het eenvoudig om complexe lay-outs en designs te maken. Hier volgt een techniek om een gradiënt effect toe te voegen bovenop een achtergrondafbeelding met behulp van CSS. Voorbeeld: fumobbq.nl

Gradient css

1. Bepaal waar je de gradiënt wilt plaatsen

In dit voorbeeld gaan we ervan uit dat je het gradiënt-effect wilt toepassen op een blok met de klasse .header-wrapper in het Avada-thema. Deze klasse wordt op het hoogste niveau van het Avada blok geplaatst. Dit is ook waar je de achtergrondafbeelding zou plaatsen.

2. CSS-code

Hieronder staat de benodigde CSS-code om het gradiënt effect over een achtergrondafbeelding te leggen:


.header-wrapper {
position: relative;
}

.header-wrapper:before {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0 ;
background: linear-gradient(0deg, rgba(22,33,27,1) 10%, rgba(22,33,27,0) 80%);
}

Mogelijke problemen

Soms kan het zijn dat vanwege andere stijlen in je thema of plugins de bovenstaande code niet direct effect heeft. Als je merkt dat de gradiënt niet verschijnt zoals gewenst, kun je proberen !important toe te voegen aan de eigenschappen. Dit zorgt ervoor dat deze specifieke stijl prioriteit krijgt boven anderen.

.header-wrapper:before {

background: linear-gradient(0deg, rgba(22,33,27,1) 10%, rgba(22,33,27,0) 80%) !important;
}

Hoewel het gebruik van !important effectief kan zijn, wordt het over het algemeen aangeraden dit spaarzaam te gebruiken. Overmatig gebruik kan het lastiger maken om in de toekomst stijlen te debuggen of aan te passen.

Hopelijk helpt dit je om een prachtig gradiënt-effect te bereiken in jouw Avada thema!

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.