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

`background-image`-egenskaben gør det muligt at tilføje et billede som baggrund på et HTML-element. Den grundlæggende syntaks er meget enkel:
```css
background-image: url("image-url.jpg");
```
Som værdi for `background-image`-egenskaben anvendes `url()`, og inde i disse parenteser angives billedets url.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTW9kaSwgYWxpcXVhbS48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJveCB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogMTQwcHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZC1maXJzdC1leGFtcGxlLmpwZyIpOwp9

## background-repeat
Angiver om billedet gentages horisontalt, vertikalt, begge dele eller slet ikke.
``` 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` bruges til at angive startpositionen for et baggrundsbillede inden for et elements baggrundsområde. Denne egenskab gør det muligt at specificere, hvor baggrundsbilledet skal placeres, og hvordan det skal positioneres i forhold til elementet. Det er nødvendigt at angive positionen på både `x`- og `y`-aksen
```css
background-position: x y
```

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

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcG9zaXRpb24tZXhhbXBsZS53ZWJwIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDE4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtcG9zaXRpb246IHJpZ2h0IHRvcDsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtcG9zaXRpb246IGxlZnQgYm90dG9tOwp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogNjAlIDEwcHg7Cn0=

## background-size
Styrer, hvordan baggrundsbilledet skaleres:
```css
background-size: auto | cover | contain | value in px/em/rem;
```

- `auto`: original billedstørrelse;
- `cover`: udfylder hele elementet, kan beskæres;
- `contain`: tilpasser hele billedet, kan efterlade tom plads;
- `value`: brugerdefineret størrelse (f.eks. `100px` `50px`, `50%`).

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

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIHdpZHRoOiAxNjBweDsKICBoZWlnaHQ6IDE0MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtvcmNoaWQ7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZCtzaXplK2ltYWdlK2V4YW1wbGUucG5nIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDI4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtc2l6ZTogYXV0bzsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47Cn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLXNpemU6IDkwcHg7Cn0=

Hvad gør egenskaben `background-repeat`?

Hvilken egenskab bestemmer placeringen af et elements baggrundsbillede?

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Anvendelse af Baggrundsbilleder

background-repeat

background-position

background-size

1. Hvad gør egenskaben `background-image`?

2. Hvad gør egenskaben `background-repeat`?

3. Hvilken egenskab bestemmer placeringen af et elements baggrundsbillede?