Verkkokehityksen maailmassa on paljon omaksuttavaa, erityisesti visuaalisen estetiikan osalta. Keskeinen ominaisuus kiehtovien, houkuttelevien ja visuaalisesti miellyttävien verkkosivujen luomisessa on taustakuvien tehokas käyttö. Vaikka se saattaa kuulostaa triviaalilta, taustakuvan asettaminen CSS:llä (Cascading Style Sheets) muodostaa perustan monille upeille verkkosivustoille. Lähdetään siis tälle matkalle ymmärtämään taustakuvan asettamista CSS:llä.
Johdatus CSS-taustoihin
Kun puhumme taustoista CSS:ssä, viittaamme pohjimmiltaan joukkoon ominaisuuksia, jotka vaikuttavat HTML-elementin taustaan. Näitä voivat olla:
- Taustaväri
- Taustakuva
- Toistetaanko kuvaa ja miten
- Kuvan sijoittelu
- Kuvan koon suhde elementin kokoon
Tässä oppaassa keskitymme taustakuviin ja siihen, miten ne sisällytetään verkkosivuillesi mahdollisimman tehokkaasti.
Vaiheittainen opas: Taustakuvan asettaminen CSS:llä
CSS:ssä taustakuvan asettaminen tapahtuu background-image-ominaisuuden avulla. Katsotaan, miten tämä toimii.
1. Määritä taustakuva
Ensimmäinen vaihe on määrittää taustaksi käytettävä kuva. background-image-ominaisuutta käytetään tähän tarkoitukseen, ja se vaatii kuvan URL-osoitteen seuraavassa muodossa:
body {
background-image: url("image.jpg");
}
Tämä asettaa kuvan nimeltä 'image.jpg' verkkosivun body-elementin taustaksi. Kuvatiedoston tulisi sijaita samassa hakemistossa CSS-tiedoston kanssa. Jos kuva on muualla, sinun on määritettävä oikea polku kuvatiedostoon.
2. Hallitse kuvan toistoa
Oletuksena taustakuva toistuu peittääkseen koko HTML-elementin. background-repeat-ominaisuutta käytetään tämän toiston hallintaan.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Arvo no-repeat estää kuvan toistumisen. Muita käytettäviä arvoja ovat repeat-x (vaakasuora toisto), repeat-y (pystysuora toisto) ja repeat (oletusarvo, toistuu molempiin suuntiin).
3. Sijoita kuva
background-position-ominaisuus mahdollistaa kuvan sijoittelun hallinnan elementin sisällä. Tämä on erityisen hyödyllistä, kun kuva ei toistu.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: right top;
}
Tässä esimerkissä kuva sijoitetaan body-elementin oikeaan yläkulmaan. Muita käytettäviä arvoja ovat left, center ja bottom sekä tarkat pikseli- tai prosenttiarvot.
4. Säädä kuvan kokoa
background-size-ominaisuus mahdollistaa taustakuvan koon hallinnan. Yleisimmin käytetyt arvot ovat contain (skaalaa kuva mahtumaan elementin sisään säilyttäen kuvasuhteen) ja cover (skaalaa kuva peittämään koko elementin säilyttäen kuvasuhteen).
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
}
Tässä esimerkissä cover-arvo skaalaa kuvan peittämään koko verkkosivun body-elementin.
5. Käytä lyhennysmerkintää tehokkuuden parantamiseksi
Kun olet tutustunut yksittäisiin ominaisuuksiin, voit käyttää lyhennysmerkintää background määrittääksesi kaikki taustaominaisuudet yhdellä rivillä.
body {
background: url("image.jpg") no-repeat right top / cover;
}
Tällä on sama vaikutus kuin edellisessä esimerkissä, mutta se on kirjoitettu tehokkaammin. /-merkkiä käytetään erottamaan background-position- ja background-size-ominaisuudet.
Nyt kun sinulla on perusta taustakuvien asettamiseen CSS:llä, on aika olla luova. Kokeile eri kuvia, sijoitteluja ja kokoja nähdäksesi, miten ne muuttavat verkkosivusi esteettistä vetovoimaa.
Usein kysytyt kysymykset
Kuinka asetan koko näytön taustakuvan CSS:llä?
Voit asettaa koko näytön taustakuvan soveltamalla background-image-ominaisuutta <body>-tagiin ja käyttämällä background-size: cover; -arvoa skaalaamaan kuva peittämään koko näytön.
Kuinka estän taustakuvan toistumisen CSS:llä?
Käytä background-repeat: no-repeat; -ominaisuutta estääksesi taustakuvan toistumisen.
Voinko käyttää ulkoista kuvan URL-osoitetta taustakuvana CSS:llä?
Kyllä, voit käyttää ulkoista kuvan URL-osoitetta taustakuvana. Aseta URL-osoite url()-funktion sisään näin: background-image: url("http://example.com/image.jpg");
Kuinka voin sijoittaa taustakuvani tiettyyn kohtaan?
Käytä background-position-ominaisuutta taustakuvan sijoittamiseen. Voit käyttää avainsana-arvoja (top, bottom, left, right, center) tai tarkkoja koordinaatteja (px, em, % jne.).
Voinko käyttää liukuvärejä taustana CSS:llä?
Kyllä, CSS mahdollistaa liukuvärin luomisen, jota voit käyttää taustakuvana. Käytä linear-gradient()- tai radial-gradient()-funktiota background-image-ominaisuuden arvona.
CSS-ominaisuuksien, erityisesti taustakuvien, hallitseminen antaa sinulle mahdollisuuden luoda visuaalisesti houkuttelevia, kiinnostavia ja ainutlaatuisia verkkosivustoja. Jatka harjoittelua, kokeilua ja taitojesi kehittämistä. Pian luot mestariteoksia verkkokankaalle!
