Een achtergrond instellen op je website

Het meest duidelijke verschil tussen websites is toch vaak wel de gebruikte achtergrond. Achtergronden kunnen voor verschillende elementen ingesteld worden. Dit kunnen enkele kleuren zijn, mooie gradients (kleurverlopen) of afbeeldingen. Binnen WebMakkie kunnen deze allemaal ingesteld worden, en meer... Heb je bijvoorbeeld wel eens van het parallax effect gehoord? Of een achtergrond overlay? In dit artikel gaan we achtergronden voor een sectie instellen omdat deze de meeste opties heeft.

Een enkele achtergrond kleur instellen

De meest simpele manier is een enkele kleur instellen als achtergrond. Ga met de muis op de sectie staan en klik op het zwarte hokje met de 4 witte vierkantjes, klik op bewerken. Kies bovenin het instellingen paneel voor stijl. Je ziet nu de achtergrond instellingen verschijnen. Klik achter Achtergrond kleur op het hokje waar 'normaal' onder staat.

Achtergrond kleur van sectie bewerken

Je krijgt nu de kleuren kiezer te zien. Hier kun je links een kleur selecteren of zelf een kleur samenstellen door rechts je kleur opties te selecteren. De schuif onder het grote vierkant is voor de transparantie, links is volledig transparant en rechts is niet transparant. Nadat je een kleur ingesteld hebt klik je op Selecteren en je achtergrond kleur is ingesteld. Wil je nou de kleur verwijderen, klik dan op het kruisje rechts bovenin de kleuren kiezer en daarna op Selecteren. Je kleur is nu verwijdert.

Kleur kiezer

Achtergrond met kleurverloop instellen

Om een kleurverloop in te stellen ga je naar de achtergrond instellingen. Kies bij het Achtergrond type voor Kleurverloop. Hier kun je de Kleur en de Tweede kleur opgeven. Vervolgens zie je bij iedere kleur een locatie schuif. Met deze schuiven kun je aangeven waar de kleurverloop moet beginnen en eindigen. Stel je een schuif in op 50% dan begint of eindigt de kleurverloop pas op de helft van het element.

Kleurverloop instellingen

Het type verloop staat standaard ingesteld op Lineair (dezelfde richting). Hierbij kun je de hoek van de kleurverloop instellen. In onderstaande afbeelding is de hoek ingesteld op 45 graden. Hierdoor loopt het verloop van links onder naar rechts boven.

Kleurverloop diagonaal

De andere instelling is radiaal (rond). Dit betekend dat het verloop vanuit het midden in een cirkel naar buiten toe vloeit. Bij deze optie kun je de locatie van het middelpunt veranderen. Dit middelpunt staat standaard op 50% (midden). In onderstaande afbeelding heb ik horizontaal en vertikaal beide op 40% ingesteld. Je ziet nu dat het middelpunt zich op 40% van de hoogte en breedte bevind.

Kleurverloop radiaal

Een achtergrond afbeelding instellen

Om een achtergrond afbeelding in te stellen ga je naar de sectie instellingen, stijl. Klik onder Achtergrond afbeelding op het grijze rechthoek.
Achtergrond afbeelding instellen
Je krijgt nu de media manager te zien. Sleep een afbeelding naar het hokje links bovenin. Je afbeelding wordt nu ge-upload. Aan de rechterkant zie je nu een nieuw paneel met daarin je afbeelding. Klik op Afbeelding invoegen om de afbeelding als achtergrond te gebruiken.
Afbeelding invoegen
Je zult nu zien wanneer je een kleine afbeelding gekozen hebt dat de afbeelding meerdere keren naast en onder elkaar weergegeven wordt.
Afbeeldingen naast elkaar
Om dit op te lossen stel je de optie Herhalend in op Niet herhalen, stel de Achtergrond grootte in op vullen. De afbeelding zal nu opgerekt worden zodat deze in het element past.
Achtergrond afbeelding instellingen
Afbeelding vullen

Een achtergrond afbeelding vastmaken

Je kunt een afbeelding vastzetten door achter Achtergrond bevestiging voor vastgemaakt te kiezen. De afbeelding wordt nu opgerekt en blijft stil staan terwijl de rest van de pagina voorbij scrolt.

Een achtergrond afbeelding laten scrollen (parallax)

De afbeelding laten scrollen wordt ook wel het parallax effect genoemd. Hierbij staat de afbeelding niet volledig stil maar beweegt een beetje omhoog of naar beneden terwijl er gescrolt wordt. Dit effect kun je instellen door onder de optie Achtergrond effecten Achtergrond scrollen in te stellen op scrollen.

Wat is een achtergrond overlay?

Met een achtergrond overlay kun je een andere achtergrond laag over de bestaande achtergrond heen leggen. Uiteraard geef je de overlay in dit geval een bepaalde transparantie omdat anders de originele achtergrond niet meer zichtbaar zou zijn. Met achtergrond en achtergrond overlay samen kun je mooie effecten creëren.

In onderstaande afbeelding heb ik de metalen blokken als achtergrond ingesteld en hieroverheen een achtergrond overlay met een kleurverloop ingesteld die van zwart en niet transparant naar volledig transparant loopt in een hoek van 90 graden.
Achtergrond overlay

Deze website is gemaakt met WebMakkie

KvK nr: 65316495 | BTW-id: NL856062947B01
© WNED.NL 2009 - 2023 © Geregistreerd Intellectuele Eigendom (IE BOIP 1323079)

WebMakkie is de gratis website maker van WITXL.NL