Danas su tražene web stranice s responzivnim pozadinskim slikama. Responzivne web stranice korisnicima pružaju idealno korisničko iskustvo na gotovo svim uređajima uključujući mobitele, tablete ili stolna računala. Responzivne slike mogu prilagoditi pozadinu web stranice, veličinu zaslona i dimenzije. Responzivne slike osiguravaju održavanje kvalitete i proporcija. Osim toga, web stranica s responzivnim pozadinskim slikama učitava se brzo.
Ovaj će vodič pružiti upute za prilagodbu pozadinskih slika dimenzijama zaslona.
Kako prilagoditi pozadinske slike dimenzijama zaslona?
Slika se može prilagoditi dimenzijama zaslona prolaskom kroz postupne upute u nastavku.
Korak 1: Napravite HTML strukturu
Najprije stvorite HTML strukturu i dodajte vanjski stilski list pomoću oznaku u odjeljku head HTML-a. U tu svrhu jednostavno postavite ' ” unutar oznake za glavu. ' rel ” označava odnos datoteke s HTML dokumentom. ' href ” oznaka navodi adresu CSS datoteke:
< html >
< glava >
< veza rel = 'list stilova' href = 'style.css' >
< titula > Responzivna pozadinska slika titula >
glava >
< tijelo >
-- Područje za dodavanje drugog sadržaja-- >
tijelo >
html >
Korak 2: Primijenite CSS
Sada primijenite CSS na ' tijelo ” odjeljak. Prvo odredite pozadinsku sliku. U tu svrhu koristite ' pozadinska slika ' i navedite ' url() ” vrijednost koja sadrži adresu slikovne datoteke.
Nakon toga upotrijebite ' pozadinska slika ' za određivanje veličine slike, ' pozadinsko ponavljanje svojstvo za postavljanje ponavljanja slike i ' pozadina-prilog ” za postavljanje hoće li se slika pomicati s ostatkom stranice ili ne. Na kraju postavite ' margina ' i ' podstava ” do “ 0 ”:
tijelo {pozadinska slika: url ( 'testna-slika.jpg' ) ;
veličina pozadine: 100 % 100 % ;
/* Skalirajte sliku na 100 % širina i 100 % visina */
pozadinsko ponavljanje: bez ponavljanja;
privitak pozadine: fiksno;
margina: 0 ;
padding: 0 ;
/* Izborno: fiksna pozadina */
}
Izlaz
Ovo je rezultat prije skupljanja prozora preglednika:
Nakon kontrakcije preglednika:
Gornji rezultat potvrđuje da je slika prilagodila pozadinu dimenzijama zaslona.
Zaključak
Da biste prilagodili pozadinske slike dimenzijama zaslona, prvo uključite ' prozor za prikaz ” u odjeljku glave za kontrolu dimenzija i skaliranja. Zatim izradite HTML strukturu i primijenite CSS. U CSS-u postavite ' veličina pozadine ' vrijednost svojstva za ' pokriti ” za skaliranje visine i širine slike. Ovaj članak predstavlja potpuni vodič za prilagodbu pozadinskih slika dimenzijama zaslona.