Summary  
This chapter explains how to configure background images using styling properties—setting an image source, controlling repetition, positioning it within an element, and adjusting its size.

General domain of usage  
Web page design and styling

Learn how to use background images in CSS to create visually appealing designs. This video explains how to add an image as a background, control its position, size, and repetition using properties like `background-image`, `background-position`, `background-size`, and `background-repeat`. See practical examples of each property in action to understand how they affect the appearance of your HTML elements. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Met de eigenschap `background-image` kan een afbeelding als achtergrond van een HTML-element worden toegevoegd. De basis-syntaxis is zeer eenvoudig:
```css
background-image: url("image-url.jpg");
```
Als waarde voor de eigenschap `background-image` gebruiken we `url()`, en binnen deze haakjes geven we de url van de afbeelding op.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTW9kaSwgYWxpcXVhbS48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJveCB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogMTQwcHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZC1maXJzdC1leGFtcGxlLmpwZyIpOwp9

## background-repeat
Bepaalt of de afbeelding horizontaal, verticaal, beide of helemaal niet wordt herhaald.
``` css
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+IG5vLXJlcGVhdDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+cmVwZWF0PC9zcGFuPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm94Ij48c3Bhbj5yZXBlYXQteDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+cmVwZWF0LXk8L3NwYW4+PC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcmVwZWVhdC1leGFtcGxlLndlYnAiKTsKCiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpzcGFuIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxOHB4OwogIGJhY2tncm91bmQtY29sb3I6IHJnYigxNDUsIDE2NSwgMTgyKTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7Cn0KCi5ib3g6bnRoLWNoaWxkKDIpIHsKICBiYWNrZ3JvdW5kLXJlcGVhdDogcmVwZWF0Owp9CgouYm94Om50aC1jaGlsZCgzKSB7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IHJlcGVhdC14Owp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IHJlcGVhdC15Owp9

## background-position
`background-position` wordt gebruikt om de beginpositie van een achtergrondafbeelding binnen het achtergrondgebied van een element in te stellen. Met deze eigenschap kan worden opgegeven waar de achtergrondafbeelding moet worden geplaatst en hoe deze gepositioneerd moet worden ten opzichte van het element. De positie moet worden ingesteld op de `x`- en `y`-as
```css
background-position: x y
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+aW4gdGhlIGNlbnRlcjwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+b24gdGhlIHJpZ2h0IHRvcDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+b24gdGhlIGxlZnQgYm90dG9tPC9zcGFuPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm94Ij48c3Bhbj51c2luZyBweDwvc3Bhbj48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcG9zaXRpb24tZXhhbXBsZS53ZWJwIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDE4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtcG9zaXRpb246IHJpZ2h0IHRvcDsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtcG9zaXRpb246IGxlZnQgYm90dG9tOwp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogNjAlIDEwcHg7Cn0=

## background-size
Bepaalt hoe de achtergrondafbeelding wordt geschaald:
```css
background-size: auto | cover | contain | value in px/em/rem;
```

- `auto`: originele afbeeldingsgrootte;
- `cover`: vult het gehele element, kan bijsnijden;
- `contain`: past de volledige afbeelding, kan lege ruimte overlaten;
- `value`: aangepaste grootte (bijv. `100px` `50px`, `50%`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+YXV0bzwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+Y292ZXI8L3NwYW4+PC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3giPjxzcGFuPmNvbnRhaW48L3NwYW4+PC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3giPjxzcGFuPnZhbHVlIGluIHB4PC9zcGFuPjwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIHdpZHRoOiAxNjBweDsKICBoZWlnaHQ6IDE0MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtvcmNoaWQ7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZCtzaXplK2ltYWdlK2V4YW1wbGUucG5nIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDI4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtc2l6ZTogYXV0bzsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47Cn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLXNpemU6IDkwcHg7Cn0=

Wat doet de eigenschap `background-image`?

Wat doet de eigenschap `background-repeat`?

Welke eigenschap bepaalt de positie van de achtergrondafbeelding van een element?

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Achtergrondafbeeldingen Toepassen

background-repeat

background-position

background-size

1. Wat doet de eigenschap `background-image`?

2. Wat doet de eigenschap `background-repeat`?

3. Welke eigenschap bepaalt de positie van de achtergrondafbeelding van een element?