Het was even puzzelen om de beste manier te vinden om een SVG in de achtergrond van een container te kunnen gebruiken. Je kunt een container een achtergrondkleur, -gradient of -image geven. Helaas kun je geen icon (voor bewerking svg’s) gebruiken.

Dus erom heen werken:

Zie voorbeelden hieronder. De container met de achtergrond SVG is 100% breed. Maar als je dus in kolommen wilt werken, zoals hieronder, dan zit je de container met css-class genest in de container van de kolom.

SVG achtergrond container

In elementor; geef de container een class onder ‘geavanceerd’: css-classes: svg-bg-container1a.

Zoals je ziet in de css is de container dan altijd 100% breed. En dus de SVG vullend in de achtergrond van de container. Om de SVG boven, center, of onder uit te lijnen, zie voorbeelden hieronder. Als de container groot word door veel inhoud, dan zie je niet meer het verschil tussen achtergrond posities van de SVG.

SVG achtergrond container genest in kolommen

In elementor; geef de geneste container een class onder ‘geavanceerd’: css-classes: svg-bg-container1a

.svg-bg-container1a {
position: relative; /* Zorgt dat ::before zich hierbinnen positioneert */

height: 100%; /* zorgt ervoor dat de geneste container uitvuld in de parant container */
overflow: hidden; /* Voorkomt dat de SVG uitsteekt */
z-index: 1; /* Zorg dat de inhoud erboven ligt */
}

bottom left;

.svg-bg-container1a::before {
content: “”;
position: absolute; /* Absoluut gepositioneerd binnen de container */
bottom: 0; /* Uitlijning met onderkant */
left: 0; /* Uitlijning met linkerkant */
width: 100%;
height: 100%;
background: url(‘https://beeldbank.maydiya.nl/wp-content/uploads/uploads/images/blaasbloem1.svg’) no-repeat bottom left;
background-size: cover;
transform: rotate(0deg); /* Pas aan indien nodig */
opacity: 1; /* Volledig zichtbaar */
z-index: 0; /* Achter de inhoud */
pointer-events: none; /* Laat klikken door op pseudo-element */
}

SVG achtergrond container genest in kolommen

In elementor; geef de geneste container een class onder ‘geavanceerd’: css-classes: svg-bg-container1b

.svg-bg-container1b {
position: relative;
height: 100%;
overflow: hidden;
z-index: 1;
}

top left;

.svg-bg-container1b::before {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(‘https://beeldbank.maydiya.nl/wp-content/uploads/images/blaasbloem1.svg’) no-repeat top left;
background-size: cover;
transform: rotate(0deg);
opacity: 1;
z-index: 0;
pointer-events: none;
}

bg-container1a

lorum ipsum

bottom left;

bg-container1b

lorum ipsum

top left;

svg-bg-container2a

Kleur aanpassen in Illustrator of in de svg code zelf; bij Path Fill.

bottom left;

opacity: 0.3; /* transparantie */

.svg-bg-container2a::before {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(‘https://beeldbank.maydiya.nl/wp-content/uploads/uploads/images/svg10-oranje.svg’) no-repeat bottom left;
background-size: cover;
transform: rotate(0deg);
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

svg-bg-container2b

top left;

svg-bg-container2a

lorum ipsum

bottom left;

svg-bg-container2b

lorum ipsum

top left;

PNG achtergrond plaatje als icon; grijstinten gekleurd. Om dit te laten werken vanuit Illustrator; klik op de afbeelding – Object – uitbreiden. Vulkleur zwart. En verander per element de opacity.

PNG plaatje als achtergrond. Lees hierboven hoe het werkt in CSS. Nu alleen de mogelijkheid om het vlak te kleuren maar niet de image zelf. dus dat in illustrator doen

SVG achtergrond container CSS

.svg-bg-container5 {
position: relative;
overflow: hidden;
height: 100%;
z-index: 1;
}

.svg-bg-container5::before {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(‘https://beeldbank.maydiya.nl/wp-content/uploads/images/plantjes-kader2.svg’) no-repeat bottom left;
background-size: cover;
transform: rotate(0deg);
opacity: 1;
z-index: 0;
pointer-events: none;
}

PNG plaatje als achtergrond – genest in parent container

SVG plaatje als achtergrond – als hoofdcontainer. Omdat hij in CSS staat op bottom left, is dat deel van het plaatje te zien. Dus sowsieso slimmer om: of een png te maken om bovan aan te lijnen of juist voor onder.