Websites met stijl

Naslag: achtergrond

Op dit naslag-blad

Background-color

Deze eigenschap bepaalt de achtergrond-kleur

background-color: kleur;

Op de plaats van kleur kan elke geldige kleuraanduiding staan, bijvoorbeeld een kleurnaam of een hsl-kleur:

voorbeelden background-color: blue;
background-color: hsl(240, 100%, 50%); In beide gevallen is de achtergrondkleur blauw.

Background-image

Met deze declaratie plaats je een achtergrond-afbeelding:

background-image: url(pad/afbeelding);

Url staat voor Uniform Resource Locator (zeg maar: internet adres). Tussen de haakjes komt de naam van de afbeelding incl het pad. Als de afbeelding op een andere website staat moet het volledige webadres worden opgegeven. Dus niet www.eeninternetadres.nl maar http://www.eeninternetadres.nl.

De standaard eigenschappen van de achtergrond-afbeelding zijn:

Voorbeeld

background-image: url(../img/mijnplaatje.jpg);

Background-repeat

Deze eigenschap geeft aan of en hoe de afbeelding herhaald wordt: background-repeat:methode; Er zijn 4 verschillende methoden:

methode 1background-repeat: repeat; De afbeelding wordt horizontaal en verticaal herhaald (tegelen).
Dit is de standaard-waarde.

methode 2background-repeat: repeat-x; De afbeelding wordt horizontaal herhaald.

methode 3background-repeat: repeat-y; De afbeelding wordt verticaal herhaald.

methode 4background-repeat: no-repeat; De afbeelding wordt niet herhaald.

Background-position

Deze eigenschap bepaalt de positie van de achtergrond-afbeelding.
Wordt de achtergrond-afbeelding herhaald, dan is het de positie van één van de achtergrond-afbeeldingen.

De algemene vorm is: background-position: x-waarde y-waarde; Hierbij is x-waarde de horizontale positie en y-waarde de verticale positie. Deze waarden kunnen als volgt worden opgegeven:

Met woorden:
x-waarde: left of center of right (resp links, midden, rechts)
y-waarde: top of center of bottom (resp boven, midden, onder): voorbeeld 1 background-position: right bottom; voorbeeld 2 background-position: center center; afbeelding resp rechtsonder (voorbeeld 1) en gecentreerd (voorbeeld 2)


In procenten:
0% is links / boven, 50% is midden, 100% is rechts / onder voorbeeld 3 background-position: 80% 30%; voorbeeld 4 background-position: 50% 50%; afbeelding resp 80% van links en 30% van boven (voorbeeld 3) en gecentreerd (voorbeeld 4)


In pixels:
de afstand in pixels tot de linkerkant en de bovenkant van het venster. voorbeeld 5 background-position: 20px 50px; afbeelding 20px van boven en 50px van links

Background-size

Background-size geeft de mogelijkheid een achtergrond-afbeelding groter of kleiner af te beelden.
Er zijn twee vormen:

Vorm 1

vorm 1 background-size: breedte; Breedte kan de volgende waarden aannemen:

Coverbackground-size: cover; De afbeelding is zo groot gemaakt dat het hele venster wordt gevuld.
Als de lengte/breedte-verhouding van venster en afbeelding niet gelijk zijn, zal een deel van de afbeelding niet zichtbaar zijn (buiten het venster vallen).

Containbackground-size: contain; De afbeelding is zo groot mogelijk binnen het venster.
Als de lengte/breedte-verhouding van venster en afbeelding niet gelijk zijn, zal een deel van het venster niet gevuld zijn.


Een percentage van de schermbreedte voorbeeld background-size: 25%; 25% wil zeggen dat er precies 4 afbeeldingen naast elkaar passen. De hoogte volgt dan uit de hoogte/breedte-verhouding van de afbeelding.


Een breedte in pixels voorbeeld background-size: 400px; Ook hier volgt de hoogte uit de hoogte/breedte-verhouding van de afbeelding.

Vorm 2

Vorm 2

background-size: breedte hoogte; Breedte en hoogte kunnen hier uitsluitend worden opgegeven in procenten of in pixels. Als de opgegeven breedte en hoogte niet dezelfde verhouding hebben als breedte en hoogte van de afbeelding, dan zal de afbeelding in de breedte of de hoogte worden uitgerekt.

Enkele voorbeelden:

Hierbij gaan we uit van een venster van 600px breed bij 400px hoog en een afbeelding van 1000px breed bij 800px hoog.

voorbeeld 1background-size: cover; De afbeelding wordt 600px bij 480px. Omdat de hoogte van het venster maar 400px is, wordt in de hoogte een strook van 80px afgesneden.

voorbeeld 2background-size: contain; De afbeelding wordt 500px bij 400px. De afbeelding is 100px minder breed dan het venster.

voorbeeld 3background-size: 50%; De afbeelding wordt 240px bij 300px. Er passen 2 afbeeldingen naast elkaar en 1,7 boven elkaar.

voorbeeld 4background-size: 50% 50%; De afbeelding wordt 300px bij 200px. Er passen 2 x 2 afbeeldingen in het venster. De afbeelding is iets uitgerekt in de breedte: 300px breed, i.p.v. 250px.

Opmerking: als de afbeelding flink vergroot wordt afgebeeld, wordt die onscherp.

Background-attachment

Deze eigenschap bepaalt of de achtergrond al of niet met de webpagina mee scrollt: bacground-attachment: waarde;

Er zijn 2 mogelijke waarden:

waarde 1 bacground-attachment: scroll; De achtergrond scrollt mee. (Dit is de standaard-waarde.)

waarde 2 bacground-attachment: fixed; De achtergrond scrollt niet mee, maar blijft op zijn plaats.

Gecombineerde background declaratie

De achtergrondkleur en de enkele hierboven genoemde eigenschappen kunnen verkort worden weergegeven met de volgende declaratie:
background: bg-color image repeat fixed;

Betekens van de verschillende waarden:

voorbeeld
bg-colorachtergrondkleurhsl(50,80%, 80%)
imagede afbeeldingimg/mijnafbeelding.jpg
repeateventuele herhalingno-repeat
fixedscroll of fixedfixed
voorbeeld background: hsl(50, 80%, 80%) url("img/mijnafbeelding.jpg") no-repeat fixed;

Dat is een achtergrond met de kleur hsl(50, 80%, 80%) () en de afbeelding mijnafbeelding.jpg die is opgeslagen in de map img die niet herhaald wordt en niet meeschuift. De achtergrondkleur is alleen te zien op die delen van het element die niet 'bedekt' zijn door mijnafbeelding.jpg.

Opmerkingen