CSS Taustat

CSS-taustat mahdollistavat verkkosivujen taustan muotoilun ja ulkonäön muokkaamisen. CSS:ssä on monia tapoja määrittää taustan ulkoasua, kuten taustaväri, taustakuva, toistuvat kuvat, gradientit jne. Alla on esimerkkejä CSS-taustojen käytöstä:

Taustavärin määrittäminen

Voit määrittää taustavärin CSS:ssä käyttämällä background-color -ominaisuutta. Esimerkiksi, jos haluat asettaa taustan värin valkoiseksi, voit kirjoittaa seuraavan säännön:

body {
  background-color: white;
}

Tämä sääntö asettaa sivun taustavärin valkoiseksi.

Taustakuvan määrittäminen

Voit määrittää taustakuvan CSS:ssä käyttämällä background-image -ominaisuutta. Esimerkiksi, jos haluat asettaa taustakuvaksi kukkakuvan, voit kirjoittaa seuraavan säännön:

body {
  background-image: url("kukkakuva.jpg");
}

Tämä sääntö asettaa sivun taustakuvaksi kukkakuvan, joka on tallennettu samassa kansiossa kuin sivun tiedostot.

Toistuvan taustakuvan määrittäminen

Voit määrittää toistuvan taustakuvan CSS:ssä käyttämällä background-repeat -ominaisuutta. Esimerkiksi, jos haluat toistaa kukkakuvan taustassa sekä vaaka- että pystysuunnassa, voit kirjoittaa seuraavan säännön:

body {
  background-image: url("kukkakuva.jpg");
  background-repeat: repeat;
}

Tämä sääntö asettaa kukkakuvan toistumaan sekä vaaka- että pystysuunnassa.

Gradientin määrittäminen

Voit määrittää gradientin CSS:ssä käyttämällä background-image -ominaisuutta ja gradientti-toimintoa. Esimerkiksi, jos haluat asettaa taustan sinisestä valkoiseksi gradienttina, voit kirjoittaa seuraavan säännön:

body {
  background-image: linear-gradient(to bottom, blue, white);
}

Tämä sääntö asettaa sivun taustaksi gradientin, joka alkaa sinisestä ja päättyy valkoiseen alhaalta ylöspäin.

CSS-taustojen käyttö antaa sinulle runsaasti mahdollisuuksia verkkosivujen taustan muotoiluun ja tyyliin. On tärkeää huomata, että liian raskas taustakuva tai liian monta toistoa voivat hidastaa sivun latautumista ja vaikuttaa käyttäjän kokemukseen.

Harjoittele