Hoe plaats je een afbeelding in je achtergrond met CSS ?

Een afbeelding in je achtergrond met CSS. Hoe doe je dat?

Gisteren was het tegen elf uur ’s avonds toen ik me realiseerde dat ik alweer een paar uur had zitten stoeien met een achtergrond in mijn website. Het fijne van een WordPress thema is dat je daarin kan rommelen met je CSS code om uit te testen of iets werkt.

Maar mijzelf kennende blijf ik maar klooien en rommelen tot ik klaar ben. Ik wil het gewoon goed hebben.

Uiteindelijk ben ik gestopt en vanmorgen ontdekte ik dat ik het toch niet zo mooi vindt.

Haha, zo werkt dat blijkbaar.

Maar goed ik wil je toch graag helpen om een afbeelding in de achtergrond te krijgen met behulp van CSS codes.

Weet je niet wat CSS is? Dan leg ik je dat graag uit in dit artikel over CSS.

De declaratie background

Wanneer je de selector ‘body‘ kiest (zie voor uitleg wederom het hierboven genoemde artikel!) dan kun je voor je hele pagina bepalen dat deze een achtergrond krijgt. Dat doe je met de declaratie background. Dit is een zogenaamde verkorte declaratie, want background heeft een aantal varianten.

Dit zijn ze:

background-color: hiermee bepaal je de kleur van je achtergrond
background-image: hiermee kun je een afbeelding op de achtergrond plaatsen (dat gaan we doen!)
background-repeat: hiermee bepaal je hoe vaak de afbeelding op de achtergrond wordt herhaald
background-position: hiermee bepaal je de positie van een achtergrond.
background-attachment: hiermee bepaal je of de achtergrond een vaste positie in je browser krijgt of juist mee scrolt met de pagina als je naar beneden gaat.

background-color

Om het goed uit te leggen maak ik een vak aan waar de achtergrond een andere kleur krijgt dan de rest van deze website. In dit geval pas ik het niet toe op de hele website, maar zoals gezegd met de selector ‘body‘ kan dat wel.

Voor dit vak (met class naam: voorbeeld160421) gebruik ik de volgende CSS code:

.voorbeeld160421 {
background-color: green;
}

Je kunt deze achtergrond kleur ook doorzichtiger maken. Dat doe je met opacity. Je geeft daar een getal aan mee tussen de 0.0 en 1.0. Bijvoorbeeld:

.voorbeeld160421 {
background-color: green;
opacity: 0.6;
}

Door de zwarte achtergrond van deze site zal de kleur donkerder worden, bij een witte achtergrond zal de kleur lichter worden.

background-image

We gaan nu de afbeelding toevoegen. Van deze afbeelding heb je wel een link (een URL) nodig. Deze afbeelding zal dus ergens online moeten staan. Je kunt deze dus niet op je computer laten staan want dan ziet een bezoeker jouw achtergrond niet.

Als voorbeeld heb ik de onderstaande afbeelding op mijn server geplaatst.Het bestand in het originele formaat.

De afbeelding heeft een transparante achtergrond. Dat zul je dadelijk zien als we de afbeelding in het vak plaatsen.

We gaan nu de code toevoegen om een afbeelding te tonen in het vak.

.voorbeeld160421 {
background-color: green;
background-image: url(https://html-site.nl/wp-content/uploads/2021/04/achtergrond4.png);
}

Dit geeft het volgende resultaat:

Je ziet al dat de afbeelding niet helemaal past. We gaan deze dus een stuk kleiner maken.

.voorbeeld160421 {
background-color: green;
background-image: url(https://html-site.nl/wp-content/uploads/2021/04/achtergrond4.png);
background-size: 100px;
}

Je ziet dat ik de afbeelding (background-size) op 100 pixels heb gezet. Hier moeten eigenlijk 2 formaten staan (breedte en lengte, in die volgorde ook). Zet je er maar 1 neer dan wordt de breedte bepaald door het getal en de lengte automatisch geschaald. Je kunt ook kiezen voor cover. Dan schaalt de afbeelding naar het formaat van het blok waar deze in staat.

background-repeat

We gaan er nu voor zorgen dat de afbeelding niet de hele tijd herhaalt wordt. Dat regel je met background-repeat.
Wanneer je hierachter zet: repeat-x, dan wordt de afbeelding alleen horizontaal herhaalt. Met repeat-y wordt de afbeelding verticaal herhaalt, net zolang tot het vak vol is.

Wij kiezen ervoor om de afbeelding niet te herhalen. In dat geval gebruik je ‘no-repeat‘.

.voorbeeld160421 {
background-color: green;
background-image: url(https://html-site.nl/wp-content/uploads/2021/04/achtergrond4.png);
background-size: 100px;
background-repeat: no-repeat;
}

background-position

Ik wil de achtergrond afbeelding naar rechts onder. CSS is altijd lekker makkelijk, want dat doe je door simpelweg de positie in het Engels te vertalen. Right bottom in ons geval. Je kunt ook kiezen voor bijvoorbeeld left center (links in het midden), center top (bovenaan in het midden) of left bottom (links onderaan).

.voorbeeld160421 {
background-color: green;
background-image: url(https://html-site.nl/wp-content/uploads/2021/04/achtergrond4.png);
background-size: 100px;
background-repeat: no-repeat;
background-position: right bottom;
}

Je kunt trouwens ook kiezen voor twee percentages, het eerste getal vanaf links, het tweede vanaf boven bepaald.

Nou, je ziet, na wat stoei en pruts werk zijn we gekomen waar we willen. Nog een onderdeel die wat minder makkelijk zichtbaar te maken is. Je moet er maar eens zelf mee aan de slag gaan, background-attachment. Als je hierbij kiest voor fixed, dan zal de achtergrond blijven staan op de plek die je bepaald hebt met de browser. Dat mag je zelf eens uit proberen. Ik hoop niet dat je het te laat gaat maken!