Ovaj vodič će vam pokazati jednostavan način kodiranja pozadinske slike cijele stranice pomoću CSS-a. A naučit ćete i kako tu sliku prilagoditi veličini zaslona vaših korisnika.
Učiniti da se pozadinska slika u potpunosti proteže tako da pokriva čitav prikaz preglednika uobičajeni je zadatak u web dizajnu. Srećom, ovaj se zadatak može riješiti s nekoliko redaka CSS-a.
Pokrijte prozor za prikaz slikom
Prvo ćemo htjeti biti sigurni da naša stranica stvarno pokriva cijeli prikaz:
html { min-height: 100%; }Unutar htmlćemo koristiti background-imagesvojstvo za postavljanje slike:
background-image: url(image.jpg); /*replace image.jpg with path to your image*/Magija svojstva 'Veličina pozadine'
Magija se događa sa background-sizeposjedom:
background-size: cover;covergovori pregledniku da osigura da slika uvijek pokriva cijeli spremnik, u ovom slučaju html. Preglednik će pokriti spremnik čak i ako mora razvući sliku ili malo odsjeći rubove.
Budući da preglednik može razvući sliku, trebali biste koristiti pozadinsku sliku koja ima dovoljno visoku razlučivost. Inače se slika može činiti pikseliziranom.
Ako vam je stalo da se sva slika prikazuje u pozadini, morat ćete biti sigurni da je slika relativno blizu omjera u odnosu na veličinu zaslona.
Kako fino podesiti položaj slike i izbjeći popločavanje
Preglednik također može odabrati prikaz vaše pozadinske slike u obliku pločica, ovisno o njenoj veličini. Da se to ne dogodi, upotrijebite no-repeat:
background-repeat: no-repeat;Kako bi stvari bile lijepe, imidž ćemo uvijek usredotočiti:
background-position: center center;To će cijelo vrijeme centrirati sliku i vodoravno i okomito.
Sada smo proizveli potpuno odzivnu sliku koja će uvijek pokrivati cijelu pozadinu:
html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } Kako popraviti sliku na mjestu tijekom pomicanja
Sada, samo u slučaju da želite dodati tekst na vrh pozadinske slike i taj tekst preplavi trenutni prikaz, možda biste trebali osigurati da vaša slika ostane u pozadini kada se korisnik pomakne prema dolje da vidi ostatak teksta:
background-attachment: fixed;Možete uključiti sva gore opisana svojstva pozadine pomoću kratkog zapisa:
background: url(image.jpg) center center cover no-repeat fixed;Izborno: Kako dodati medijski upit za mobitel
Da biste dodali šlag na tortu, možda ćete htjeti dodati medijski upit za manje zaslone:
@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } Možete koristiti Photoshop ili neki drugi softver za uređivanje slika da biste smanjili veličinu izvorne slike kako biste poboljšali brzinu učitavanja stranice na mobilnim internetskim vezama.
Dakle, sada kada znate čaroliju stvaranja responzivne pozadine slike na cijeloj stranici, vrijeme je da krenete u stvaranje lijepih web stranica!
Želite li vidjeti više savjeta i znanja za web razvoj?
- Pretplatite se na moj tjedni bilten
- Posjetite moj blog na 1000 Mile World
- Pratite me na Twitteru