Afbeelding, kleurverloop of gradients als achtergrond in pagina

Ik ben enthousiast over het maken van unieke, mooie verloopjes. Leer hoe je een achtergrond kan maken met een CSS class stijl in WordPress met een achtergrondafbeelding of een gradient kleurverloop.

Achtergronden hebben een enorme impact op het ontwerp van een website. Zo groot, dat het waarschijnlijk een van de belangrijkste aspect van je website is – naast de functionaliteit natuurlijk. Het zijn de eindjes die het uiterlijk en het thema van een website aan elkaar koppelen. Ze maken vaak groeperingen, maken onderscheid tussen pagina’s en hebben de hand in het aanwijzen van belangrijke elementen van de site. Maar wilt u niet dat uw achtergrond boeiend, uniek en onderscheidend is?

Gradiëntachtergronden kunnen dat doen. Kijk eens naar een aantal van uw favoriete websites. De kans is groot dat ten minste een handvol van de best ontworpen websites die er zijn een soort van gradiënt als achtergrond implementeren. Ze dragen bij aan het unieke karakter en het ontwerp van uw website, terwijl ze uw consumenten tekenen om een tijdje op uw pagina te blijven staan.

Hoe maak je je eigen gradiënt-achtergrond met verloop

Oké, dus je begrijpt het belang van gradiënten als achtergrond – het is waarschijnlijk tijd dat we het echte vlees van het artikel gaan halen en je leren hoe je het zelf kunt maken. Het beste nieuws? Het is heel eenvoudig. Omdat gradiënten de ruimte vullen die ze krijgen, maken ze prachtige achtergrondafbeeldingen.

The Basics

Hier zijn een paar belangrijke termen en ingrediënten waarmee u vertrouwd moet zijn voordat u begint met het bouwen van uw code voor uw geweldige achtergrondgradiënt.

CSS aanpassen in WordPress

Je moet eerst wat basisprincipes weten van CSS.

• Wat is de CSS code die ik nodig heb?
• Hoe achterhaal ik de CSS code?
• Kan ik zelf CSS code maken?
• Waar zit ik deze code neer?

De basis van CSS aanpassen in WordPress leer je hier:
CSS aanpassen en toevoegen voor beginners of volg onze CSS training op maat.

Achtergrondafbeelding met CSS maken (class) in WordPress

Effen-kleurige achtergronden gebruiken de term background-color wanneer je voor hen codeert in CSS, maar de term background-image verwijst specifiek naar verlopen en gradiënten. Omdat de kleurverlopen een stapelvolgorde hebben, kunt u ze beschouwen als gelaagde achtergrondafbeeldingen, zodat u de kleurverlopen van uw achtergrondafbeeldingen over andere afbeeldingen kunt verdelen als u de transparantie van uw kleurverlopen manipuleert.

Maak een achtergrondafbeelding

Maak eerst een achtergrondafbeelding in bijvoorbeeld Photoshop of Affinity:

Ik heb een afbeelding gemaakt van 1600pixels breed. Breed genoeg voor de meeste webbrowsers:

---

Achtergrond maken met achtergrondafbeelding in WordPress met CSS class

Je kan een achtergrond maken met een achtergrondafbeelding door de volgende CSS code in je thema te plaatsen.
WP > Weergave > Customizer > Aangepaste CSS

.bg { background-image: url("https://www.cursuswp.com/wp-content/uploads/achtergrond-maken-css-class-stijl-wordpress-achtergrondafbeelding-verloop-gradient.jpg"); /* verloop door cursuswp.com */ background-repeat: no-repeat; /* verloop door cursuswp.com */ background-attachment: fixed; /* verloop door cursuswp.com */ }

Achtergrondafbeelding met CSS over de hele breedte van de browser

Voeg nog wat meer code toe aan je CSS, namelijk ‘cover’. Dan wordt de afbeelding beeldvullend.

.bg  { background-image: url("https://www.cursuswp.com/wp-content/uploads/achtergrond-maken-css-class-stijl-wordpress-achtergrondafbeelding-verloop-gradient.jpg")    ; /* verloop door cursuswp.com */ -webkit-background-size: cover; /* verloop door cursuswp.com */ -moz-background-size: cover; /* verloop door cursuswp.com */ -o-background-size: cover; /* verloop door cursuswp.com */ background-size: cover; /* verloop door cursuswp.com */ }

---

Gradient kleurverloop maken als achtergrond met CSS

Gradient

Gradient specificeert het type kleurverloop dat je gaat instellen. Hoewel lineaire kleurverlopen het meest gebruikte type kleurverloop zijn voor achtergronden, kun je het ook instellen voor radiale kleurverlopen.

Color Stops & Colors

Voor een kleurverloopontwerp in CSS heb je minstens twee kleuren nodig om het kleurverloop te laten overgaan. Deze worden kleurstops genoemd omdat ze de code vertellen op welke punten elke kleur moet stoppen en beginnen langs het kleurverloop.

De syntax

De syntaxis is het belangrijkste onderdeel van uw codeerproces, want als uw zin niet werkt, werkt uw code ook niet. Laten we dus de syntaxis van verschillende gradiëntachtergronden afbreken.

Laten we het hebben over de achtergrondafbeelding voor een lineaire gradiëntachtergrond:
background-image: linear-gradient(color1,  color2);
Wat dacht je van een achtergrondafbeelding voor een radiaalverloop-achtergrond:
background-image: radial-gradient(color1, color2, color3);
Wil je meer kleuren? Voeg dan meer kleuren toe!
Wil je de percentages van je kleur aanpassen (hoe ver staan de kleuren uit elkaar)? Geef elke kleur een percentage zoals hieronder:
background-image: linear-gradient(color1 30%, color2 50%, color3 20%)

---

Voorbeeld verloop maken in met achtergrond in WordPress met CSS class stijl

Wil je de richting van uw lineaire gradiëntachtergrond aanpassen of de vorm van uw radiale lineaire gradiëntachtergrond veranderen? Voeg dan een paar van die richtingen in.
Voorbeeld:

background-image: linear-gradient(to right bottom, color1 30%,color 2 50%, color 3 20%);
background-image: radial-gradient(circle, color1 30%,color 2 50%, color 3 20%);

Richting kleurverloop achtergrond bepalen

Kleurverloop geleidelijk:

.bg-verloop { background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); /* verloop door cursuswp.com */ }

Kleurverloop hard:

.bg-verloop-hard { background: linear-gradient(117deg, rgba(184,184,184,1) 50%, rgba(0,204,0,1) 50%); /* verloop door cursuswp.com */ }

developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

---

Tekstverloop maken met achtergrondgrondafbeelding met CSS

Maak een achtergrondafbeelding. Zoiets als dit:

Resultaat

Tekstverloop maken met afbeelding

Zo maak je dit. Plaats deze tekst met class op je website:

Tekstverloop maken met afbeelding

In je CSS plaats je deze tekst:

.kleurverloop-demo { background-image: url(https://www.cursuswp.com/wp-content/uploads/verloop-gradient-achtergrondafbeelding-cursus-wordpress-handleiding-arthur-wentzel.png); /* verloop door cursuswp.com */ background-repeat: no-repeat; /* verloop door cursuswp.com */ background-clip: text; /* verloop door cursuswp.com */ background-position: left; /* verloop door cursuswp.com */ text-fill-color: transparent; /* verloop door cursuswp.com */ -webkit-background-clip: text; /* verloop door cursuswp.com */ -webkit-text-fill-color: transparent; /* verloop door cursuswp.com */ background-position: left; /* verloop door cursuswp.com */ }

Voorbeelden verloopjes

Nog een handleiding met foto achter tekst met CSS

Voorbeeld van gradient met CSS

background-image: linear-gradient(to top right, rgb(101, 115, 255), rgb(111, 114, 247), rgb(120, 114, 239), rgb(130, 113, 231), rgb(139, 112, 223), rgb(149, 111, 215), rgb(158, 111, 208), rgb(168, 110, 200), rgb(177, 109, 192), rgb(187, 108, 184), rgb(196, 108, 176), rgb(206, 107, 168)); /* verloop door cursuswp.com */

---

Meer handleidingen over classes en Css in WordPress

• CSS aanpassen specifieke pagina en berichten in WordPress
• Zelf button maken in WordPress met HTML en CSS Class
• Css, class, span stijlen maken opmaak WordPress website
• Kleurkader box maken met Div in WordPress met class css
• Gebruik class voor layout geen html page builder opmaak

Hard verloop maken (niet vloeiend)

Om een hard verloop te maken plaats je deze code in je CSS. De eerste waarde geeft de hoek weer. De 2e en 3e waarde staan op hetzelfde percentage om een hard verloop te krijgen:

.kleurverloop-demo {
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 37%, rgba(238,238,238,1) 37%, rgba(238,238,238,1) 100%);
}

Tip verloop maken voor afbeeldingen:

Verloop maken voor afbeeldingen met noise en distort optie:
https://www.noiseandgradient.com/

robkendal.co.uk/blog/2020-04-02-funky-text-backgrounds-with-background-clip-css/