Achtergronden instellen

Hier zijn verschillende manieren om achtergronden in te stellen op slidde.co. CSS-achtergronden kunnen op elk element in slidde.co worden ingesteld.

Statische foto-achtergrond

Dit is het meest voorkomende gebruiksscenario.

Een fallback-kleur wanneer je achtergrondafbeelding aan het laden is of een deel van je achtergrondafbeelding transparant is:

backgroundColor: #000

De afbeeldings-URL kan worden geüpload met slidde.co. Je kunt hier ook CSS-gradients gebruiken, en slidde.co biedt enkele gradient-presets op een no-code manier:

backgroundImage: url("your_image_url")

Je kunt meestal "cover" gebruiken om ervoor te zorgen dat je achtergrond alle afbeeldingen bedekt:

backgroundSize: cover

Als backgroundSize: "cover" een belangrijk deel van je afbeelding verbergt, kun je hun posities aanpassen:

backgroundPosition: 50% 10px

Als je achtergrondafbeelding geen herhaalbaar patroon is, kun je dit instellen op no-repeat:

backgroundRepeat: no-repeat

Bepaalt of de achtergrondafbeelding beweegt wanneer je naar beneden scrolt op een pagina. Meestal heb je een statische foto nodig die niet met de scroll meebeweegt omdat deze de pagina bedekt:

backgroundAttachment: fixed

Je kunt de MDN-documentatie raadplegen voor meer diepgaande informatie.

Filters instellen op achtergrondafbeelding

Dit geldt voor Page Slide Container. Je kunt klikken op Geavanceerde achtergrond en imageElement selecteren. Het zal een apart HTML <div><img /></div> element binnen de container creëren als het eerste element.

Dan kun je CSS-eigenschappen zoals filter erop toepassen. Bijvoorbeeld, hier zijn 3 manieren om meer contrast te creëren tussen de achtergrondafbeelding en de voorgrondtekst om de leesbaarheid te verbeteren.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Bekijk de MDN-documentatie voor een meer diepgaande introductie.

Herhaalbare Patroonachtergronden

Dit geldt voor Page Slide Container. Je kunt op Geavanceerde achtergrond klikken en een patroon selecteren.

1. Selecteer een patterntype.
2. Vervolgens kun je de opties van het patroon aanpassen. Je kunt ook op de knop Inspireer me klikken om te zien welk willekeurig patroon het je geeft.

Het zal een apart HTML <div><svg width="100%" height="100%" .../></div> element binnenin creëren. Dat betekent dat je ook de CSS-eigenschappen kunt aanpassen, zoals opacity, filter, of zelfs backgroundImage om een verloopachtergrond toe te voegen aan het svg-ouderelement. En je kunt de SVG ook animeren.

Videoachtergronden

Dit geldt voor Page Slide Container. Je kunt op Geavanceerde achtergrond klikken en YouTube selecteren. Het zal een apart HTML <div><iframe /></div> element binnenin creëren om een YouTube-video in te sluiten. Je kunt daar je YouTube-URL-link plakken.

Momenteel zijn alleen YouTube-elementen toegestaan. Dit biedt betere streamingoptimalisatie dan het hosten van onze eigen video. Als je een aangepaste video-upload nodig hebt, laat het ons dan weten via de feedbackknop in de navigatiebalk.

Achtergronden Animeren

Als je CSS backgroundImage gebruikt, kun je eenvoudig de backgroundPosition animeren. Hier is een voorbeeld.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Je kunt ook andere CSS-eigenschappen animeren.

Als je echter dingen zoals CSS opacity wilt animeren, kun je het niet direct animeren. Aangezien opacity van toepassing is op het hele element. Je moet imageElement in Geavanceerde achtergrond gebruiken en target instellen op &>*:first-child om dit alleen op het afbeeldingelement toe te passen.