Taustakuvien Lisääminen Elementteihin
background-image-ominaisuudella voidaan lisätä kuva HTML-elementin taustaksi. Perussyntaksi on hyvin yksinkertainen:
background-image: url("image-url.jpg");
background-image-ominaisuuden arvona käytetään url(), ja sulkujen sisällä määritellään kuvan url-osoite.
index.html
index.css
background-repeat
Määrittää, toistetaanko kuva vaakasuunnassa, pystysuunnassa, molemmissa vai ei lainkaan.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
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
background-position: x y
index.html
index.css
background-size
Määrittää, miten taustakuva skaalataan:
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.100px50px,50%).
index.html
index.css
1. Mitä background-image-ominaisuus tekee?
2. Mitä background-repeat-ominaisuus tekee?
3. Mikä ominaisuus määrittää elementin taustakuvan sijainnin?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Mahtavaa!
Completion arvosana parantunut arvoon 2.56Taustakuvien Lisääminen Elementteihin
Pyyhkäise näyttääksesi valikon
background-image-ominaisuudella voidaan lisätä kuva HTML-elementin taustaksi. Perussyntaksi on hyvin yksinkertainen:
background-image: url("image-url.jpg");
background-image-ominaisuuden arvona käytetään url(), ja sulkujen sisällä määritellään kuvan url-osoite.
index.html
index.css
background-repeat
Määrittää, toistetaanko kuva vaakasuunnassa, pystysuunnassa, molemmissa vai ei lainkaan.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
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
background-position: x y
index.html
index.css
background-size
Määrittää, miten taustakuva skaalataan:
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.100px50px,50%).
index.html
index.css
1. Mitä background-image-ominaisuus tekee?
2. Mitä background-repeat-ominaisuus tekee?
3. Mikä ominaisuus määrittää elementin taustakuvan sijainnin?
Kiitos palautteestasi!
