CSS-taustakuvan koko-opetusohjelma - Kuinka koodata koko sivun taustakuva

Tämä opetusohjelma näyttää sinulle yksinkertaisen tavan koodata koko sivun taustakuva CSS: n avulla. Ja opit myös tekemään kuvan reagoivaksi käyttäjien näyttökokoon.

Taustakuvan asettaminen kokonaan ulottuvaksi kattamaan koko selaimen näkymä on yleinen tehtävä web-suunnittelussa. Onneksi tämä tehtävä voidaan hoitaa muutamalla CSS-rivillä.

Peitä näkymä kuvalla

Ensinnäkin haluamme varmistaa, että sivumme todella kattaa koko näkymän:

html { min-height: 100%; }

Sisällä htmlkäytämme background-imageominaisuutta kuvan asettamiseen:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Tausta-koon omaisuuden taika

Taika tapahtuu background-sizekiinteistön kanssa:

background-size: cover;

coverkäskee selainta varmistamaan, että kuva peittää aina koko säilön, tässä tapauksessa html. Selain peittää säiliön, vaikka sen on venytettävä kuvaa tai leikattava hieman reunoista.

Koska selain voi venyttää kuvaa, sinun on käytettävä riittävän korkean resoluution taustakuvaa. Muuten kuva saattaa näyttää pikselöidyltä.

Jos haluat, että koko kuva näkyy taustalla, sinun on varmistettava, että kuvan kuvasuhde on suhteellisen lähellä näytön kokoa.

Kuinka hienosäätää kuvan sijaintia ja välttää laatoitusta

Selain voi myös valita taustakuvan näyttämisen ruuduina sen koon mukaan. Käytä tätä no-repeat:

background-repeat: no-repeat;

Jotta asiat pysyvät kauniina, pidämme kuvamme aina keskitettynä:

background-position: center center;

Tämä keskittää kuvan sekä vaaka- että pystysuunnassa koko ajan.

Olemme nyt tuottaneet täysin reagoivan kuvan, joka peittää aina koko taustan:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Kuinka korjata kuva paikalleen vierittäessä

Nyt, jos haluat lisätä tekstiä taustakuvan päälle ja että teksti ylittää nykyisen näkymän, voit halutessasi varmistaa, että kuvasi pysyy taustalla, kun käyttäjä vierittää alaspäin nähdäksesi muun tekstin:

background-attachment: fixed;

Voit sisällyttää kaikki edellä kuvatut taustaominaisuudet käyttämällä lyhyttä merkintää:

background: url(image.jpg) center center cover no-repeat fixed;

Valinnainen: Mediahaun lisääminen mobiililaitteille

Voit lisätä kuorrutetta kakkuun lisäämällä media kyselyn pienemmille näytöille:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Voit käyttää Photoshopia tai muuta kuvankäsittelyohjelmistoa pienentämään alkuperäistä kuvaa parantaaksesi sivun latausnopeutta mobiili-Internet-yhteyksissä.

Joten nyt, kun tiedät herkän, koko sivun kuvan taustan luomisen taian, on aika luoda kauniita verkkosivustoja!

Haluatko nähdä lisää verkkokehitysvinkkejä ja tietoa?

• Tilaa viikoittainen uutiskirje
• Käy blogissani osoitteessa 1000 Mile World
• Seuraa minua Twitterissä