WordPress & Elementor kennisbank

Overlay achtergrondafbeelding instellen met Elementor

Inhoud van dit artikel:

Een achtergrondafbeelding is niet voor niets een achtergrondafbeelding. Maar soms gaat er toch iets teveel aandacht naar een achtergrondafbeelding. Het is dan handig om een overlay in te stellen voor de achtergrond. Het meest voor de hand liggend is om een kleur of verloop in te stellen, maar je kunt ook nog een afbeelding instellen.

Overlay instellen

In een ander artikel lees je hoe je een achtergrondafbeelding instelt voor een sectie, kolom of widget. Wanneer je een achtergrondafbeelding hebt ingesteld, verschijnt er vanzelf een nieuwe tab onder ‘Overlay’. Klik hier op.

Je ziet nu dezelfde mogelijkheden als die je hebt bij het instellen van een een achtergrond. Je kunt een afbeelding als overlay instellen, een kleur of een verloop.

Doorzichtigheid instellen

Als je een overlay instelt, kun je een beetje gaan spelen met de doorzichtigheid van de overlay. In Elementor zie je altijd direct het resultaat van je wijziging. Zo kun je dus doorgaan tot je tevreden bent met het resultaat.

Als je gebruik maakt van een verloop kun je eventueel ook de transparantie (opacity) van één van de kleuren omlaag zetten.

CSS filters

Naast dat je een kleur of verloop instelt om bijvoorbeeld de tekst leesbaarder te maken, kun je ook gebruik maken van CSS filters om dit doel te bereiken. Hiervoor heb je ook een aantal opties:

Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist
Website Strateeg | Marketing Manager in de IT

Ook bloggen op
SIJ Web?
Vergroot je zichtbaarheid en meld je aan als partner!

Populaire plugins

4/5
5/5
4.5/5
Meer doen met Elementor?
Schrijf je in voor de nieuwsbrief
No worries. Ik ga je niet spammen. Je ontvangt max. 2 keer per maand een nieuwsbrief.

Ook interessant voor jou

Extra breakpoints Elementor instellen in 2 stappen

Elementor site instellingen: stijlen zonder thema

Elementor update 2.10: multi-step formulieren en integratie met Lottie!

6 reacties

  1. Dag Sanne,

    Ik was aan het googlen en stuitte op jou website over achtergrond afbeelding omdat ik bezig ben met Elementor en de achtergrond afbeelding niet zichtbaar heb in “View” of online maar wel in de Elementor opmaak . Ken je dit probleem ?.

    Ik ben een paar dagen op weg met Elementor maar de tip van de overlay hou ik vast.

    Website is in ontwikkeling dis nog niet online,

    Als je een oplossing weet hoor ik graag.

    Met vriendelijke groet,

    1. Hoi Samuel,

      Werken alle andere afbeeldingen die je plaatst wel? En heb je het onderstaande al geprobeerd?
      – Afbeelding opnieuw uploaden
      – Andere afbeelding gebruiken
      – Achtergrondafbeelding instellen bij een andere sectie, kolom (of andere pagina)

      Als dit ook allemaal niet werkt, kan er een conflict zijn met een andere plugin. Gebruik je een plugin om de website in onderhoudsmodus te zetten? Zo ja, deactiveer deze dan even om te zien of de afbeelding dan wel werkt. Als je nog andere plugins gebruikt deze ook even een voor een deactiveren om te kijken of dit het probleem oplost.

      Als het dan nog niet lukt, mag je mij ook de inloggegevens sturen per mail (sanne@sijweb.nl) dan kan ik er even voor je naar kijken.

      Groetjes,

      Sanne

  2. Hoi,

    Ik ben een website aan het bouwen middels een YouTube filmpje van Ferdy Kopershoek. Allemaal prima. Alleen mijn afbeelding op mobiel en liggend klopt niet meer. Dek niet de hele breedte. Je ziet een stuk van de volgende foto.

    Hoe los ik dit op?

    Alvast bedankt!

    Christa Merk

    1. Hoi Christa,

      Bij het instellen van de achtergrondafbeelding heb je een optie om ‘Herhaling’ op ‘Geen’ te zetten. Dat is altijd handig om te doen en zou het probleem op moeten lossen. Daarnaast kun je ook een andere foto uploaden voor tablet of mobiel (maar dat hoeft niet) en of de positie van de afbeelding aanpassen voor mobiele apparaten, zodat ie daar wel goed op staat.
      Hopelijk kun je hier mee uit de voeten!

  3. Hi Sanne, Ik heb een probleem bij het bouwen van mijn website. Ik had een tutorial gevolgd om een menu te maken en dat ging prima. Maar later in het proces was ik ineens het menu kwijt en na de tutorial opnieuw te volgen lukt het nu niet om het (navigatie)menu zichtbaar te krijgen. Ook het logo dat eerst gewoon goed was heeft nu een wit laagje alsof de afbeelding met wit papier is afgedekt. Weet jij hoe ik mijn menu weer teruggetoverd krijg??

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.