Pogledajte danas popularna web mjesta i jedan od dizajnerskih postupaka koji ćete zasigurno vidjeti su velike pozadinske slike koje obuhvaćaju zaslon. Jedan od izazova s dodavanjem ovih slika proizlazi iz najbolje prakse da web stranice moraju reagirati na različite veličine zaslona i uređaje - pristup poznat kao responzivni web dizajn.
Jedna slika za mnoge zaslone
Budući da se izgled vašeg web mjesta mijenja i skalira s različitim veličinama zaslona, i ove pozadinske slike moraju prilagoditi svoju veličinu u skladu s tim. Zapravo su ove "fluidne slike" jedan od ključnih dijelova responzivnih web stranica (zajedno s fluidnom mrežom i medijskim upitima). Ta su tri dijela glavna komponenta responzivnog web dizajna od početka, ali premda je oduvijek bilo prilično lako dodati responzivan dizajn umetnute slike na web mjesto (umetnute slike su grafike koje su kodirane kao dio HTML oznake), radeći isto s pozadinskim slikama (koje su oblikovani na stranici koristeći CSS pozadinska svojstva) već dugo pruža značajan izazov mnogim web dizajnerima i front endu programeri. Srećom, dodatak svojstva "background-size" u CSS to je omogućio.
U odvojenom članku pokrili smo kako koristiti Veličina pozadine svojstva CSS3 za razvlačenje slika da stanu u prozor, ali postoji još bolji, korisniji način raspoređivanja za ovo svojstvo. Da bismo to učinili, koristit ćemo sljedeću kombinaciju svojstava i vrijednosti:
veličina pozadine: naslovnica;
Svojstvo ključne riječi naslovnica govori pregledniku da prilagodi sliku tako da stane na prozor, bez obzira na to koliko je velik ili mali taj prozor. Slika se skalira tako da pokriva cijeli zaslon, ali izvorni omjeri i omjer stranica ostaju netaknuti, čime se sprečava izobličenje same slike. Slika se postavlja u prozor što je moguće veći tako da je pokrivena cijela površina prozora. To znači da na stranici nećete imati praznih mjesta ili izobličenja na slici, ali isto tako znači da se dio slike može odrezati, ovisno o omjeru stranica zaslona i slike u pitanje. Na primjer, rubovi slike (gornji, donji, lijevi ili desni) mogu biti odrezani na slikama, ovisno o tome koje vrijednosti koristite za svojstvo pozadinskog položaja. Ako usmjerite pozadinu na "lijevi gornji dio", sav višak na slici uklonit će se s donje i desne strane. Ako centrirate pozadinsku sliku, višak će se otkloniti sa svih strana, ali budući da se taj višak raširio, utjecaj na bilo kojoj strani bit će manji.
Kako se koristi 'background-size: cover;'
Kada stvarate pozadinsku sliku, dobra je ideja stvoriti prilično veliku sliku. Iako preglednici mogu smanjiti sliku bez primjetnog utjecaja na vizualnu kvalitetu, kada preglednik poveća veličinu datoteke slika na veličinu veću od izvornih dimenzija, vizualna kvaliteta će se pogoršati, postajući mutna i pikseliziran. Loša strana toga je što vaša stranica postiže uspjeh kada isporučujete divovske slike na sve zaslone. Kada to učinite, pobrinite se za pravilno pripremite te slike za brzinu preuzimanja i web isporuku. Na kraju morate pronaći sretni medij između dovoljno velike veličine slike i kvalitete i razumne veličine datoteke za brzine preuzimanja.
Jedan od uobičajenih načina korištenja skaliranja pozadinskih slika je kada želite da ta slika zauzima cijelu pozadinu stranice, bez obzira je li ta stranica široka i pregledava li se na stolnom računalu ili mnogo manja i šalje li se na ručni mobitel uređaji.
Prenesite svoju sliku na svoj web domaćin i dodajte je u svoj CSS kao pozadinsku sliku:
pozadinska slika: url (vatromet-over-wdw.jpg);
pozadina-ponavljanje: bez ponavljanja;
položaj pozadine: središnje središte;
pozadina-privitak: fiksno;
Prvo dodajte CSS s prefiksom preglednika:
-webkit-background-size: naslovnica;
-moz-background-size: naslovnica;
-o-background-size: naslovnica;
Zatim dodajte svojstvo CSS:
veličina pozadine: naslovnica;
Korištenje različitih slika koje odgovaraju različitim uređajima
Iako je odgovoran dizajn za radnu površinu ili prijenosno računalo važan, raznolikost uređaja koji može pristupiti webu znatno je porastao, a dolazi i s većim izborom veličina zaslona da.
Kao što je prethodno spomenuto, učitavanje vrlo velike pozadinske slike koja reagira na pametni telefon, na primjer, nije učinkovit dizajn ili osviještenost propusnosti.
Saznajte kako možete koristiti medijski upiti za posluživanje slika koje će biti prikladne za uređaje na kojima će se prikazivati i dodatno poboljšati kompatibilnost vašeg web mjesta s mobilnim uređajima.