Summary  
This chapter covers how to use CSS background properties—background-image, background-position, background-size, and background-repeat—to add and control images as backgrounds of HTML elements.  

General domain of usage  
Web page styling and design

`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 sulkujen sisällä 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 rajautua;
- `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?

Hallitse CSS:n (Cascading Style Sheets) perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tunnelman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja selkeästi jäsenneltyjä verkkosivuja. Sopii erinomaisesti aloittelijoille, jotka haluavat vahvan perustan CSS:stä.

Tutustu CSS:n perusteisiin, sen liittämiseen HTML:ään ja HTML-elementtien muotoiluun selektoreiden avulla. Perehdy keskeisiin käsitteisiin, kuten tekstin väreihin, käyttäjän toimintaan reagoiviin pseudoluokkiin ja CSS-muuttujiin.

Opi, kuinka tekstiä muotoillaan ja asetellaan verkkosivuilla. Tutustu mukautettujen fonttien käyttöön ja erilaisiin fonttiominaisuuksiin tekstin ulkoasun parantamiseksi.

Opi laatikkomallin perusteet, jotka määrittelevät elementtien asettelun ja välistyksen verkkosivulla. Tutustu käsitteisiin kuten laatikon koko, tilan lisääminen elementteihin, lohkotason ja rivinsisäisten elementtien käsittely sekä rakenteellisten ja toiminnallisten pseudoluokkien hyödyntäminen edistyneessä tyylittelyssä.

Tutustu Flexboxiin, tehokkaaseen CSS-asettelumenetelmään elementtien järjestämiseksi riveihin ja sarakkeisiin. Opi hallitsemaan elementtien suuntaa, kohdistusta ja välistystä vaaka- ja pystysuunnassa sekä mukauttamaan yksittäisiä flex-elementtejä tarkkoja asetteluja varten.

Opi parantamaan verkkosivujesi visuaalista ilmettä CSS:n avulla. Tutustu taustavärien ja -kuvien lisäämiseen, kuvien tyylittelyyn, koristeellisten pseudoelementtien käyttöön sekä varjojen lisäämiseen vaikuttavien suunnittelujen luomiseksi.

Taustakuvien Lisääminen Elementteihin

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?