Summary  
This chapter explains how to apply and configure background images using CSS properties—background-image, background-repeat, background-position, and background-size—to control an element’s visual appearance.  

General domain of usage  
Web design / user interface 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`-ominaisuudella voidaan lisätä kuva HTML-elementin taustaksi. Perussyntaksi on hyvin yksinkertainen:
```css
background-image: url("image-url.jpg");
```
`background-image`-ominaisuuden arvona käytetään `url()`, ja näiden sulkujen sisään määritellään kuvan url-osoite.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTW9kaSwgYWxpcXVhbS48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJveCB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogMTQwcHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZC1maXJzdC1leGFtcGxlLmpwZyIpOwp9

## background-repeat
Määrittää, toistetaanko kuva vaakasuunnassa, pystysuunnassa, molemmissa vai ei lainkaan.
``` 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`-ominaisuudella määritetään taustakuvan aloituspaikka elementin tausta-alueella. Tämän ominaisuuden avulla voidaan määrittää, mihin kohtaan taustakuva sijoitetaan ja miten se asemoidaan suhteessa elementtiin. Sijainti tulee asettaa sekä `x`- että `y`-akselille.
```css
background-position: x y
```

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

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcG9zaXRpb24tZXhhbXBsZS53ZWJwIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDE4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtcG9zaXRpb246IHJpZ2h0IHRvcDsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtcG9zaXRpb246IGxlZnQgYm90dG9tOwp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogNjAlIDEwcHg7Cn0=

## background-size
Määrittää, miten taustakuva skaalataan:
```css
background-size: auto | cover | contain | value in px/em/rem;
```

- `auto`: alkuperäinen kuvan koko;
- `cover`: täyttää koko elementin, voi rajata kuvaa;
- `contain`: sovittaa koko kuvan, voi jättää tyhjää tilaa;
- `value`: mukautettu koko (esim. `100px` `50px`, `50%`).

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

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIHdpZHRoOiAxNjBweDsKICBoZWlnaHQ6IDE0MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtvcmNoaWQ7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZCtzaXplK2ltYWdlK2V4YW1wbGUucG5nIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDI4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtc2l6ZTogYXV0bzsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47Cn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLXNpemU6IDkwcHg7Cn0=

Mitä `background-image`-ominaisuus tekee?

Mitä `background-repeat`-ominaisuus tekee?

Mikä ominaisuus määrittää elementin taustakuvan sijainnin?

Muotoile verkkosivuja CSS:n avulla. Käytä värejä, typografiaa, välistyksiä ja asetteluja sekä rakenna responsiivisia komponentteja Flexboxilla.

Taustakuvien Lisääminen

background-repeat

background-position

background-size

1. Mitä `background-image`-ominaisuus tekee?

2. Mitä `background-repeat`-ominaisuus tekee?

3. Mikä ominaisuus määrittää elementin taustakuvan sijainnin?