Ez az oktatóanyag bemutatja a teljes oldalas háttérkép CSS használatával történő kódolásának egyszerű módját. Megtudhatja azt is, hogyan lehet ezt a képet a felhasználók képernyőméretéhez igazítani.
A háttérkép teljes kinyújtása, hogy lefedje a böngésző teljes nézetablakát, a web tervezés során gyakori feladat. Szerencsére ez a feladat néhány sor CSS-sel megoldható.
Fedje le a nézetablakot képpel
Először is meg akarunk bizonyosodni arról, hogy oldalunk valóban lefedi-e a teljes nézetablakot:
html { min-height: 100%; }Belül htmla background-imagetulajdonságot fogjuk használni a kép beállításához:
background-image: url(image.jpg); /*replace image.jpg with path to your image*/A „Háttér-méret” tulajdonság varázsa
A varázslat az background-sizeingatlannal történik :
background-size: cover;coverazt mondja a böngészőnek, hogy győződjön meg róla, hogy a kép mindig az egész tárolót lefedi, ebben az esetben html. A böngésző akkor is el fogja takarni a tárolót, ha ki kell nyújtania a képet, vagy kicsit le kell vágnia az élekről.
Mivel a böngésző kinyújthatja a képet, ezért elég nagy felbontású háttérképet kell használnia. Ellenkező esetben a kép pixeles lehet.
Ha törődik azzal, hogy az egész kép a háttérben jelenjen meg, akkor meg kell bizonyosodnia arról, hogy a kép méretaránya viszonylag közel van-e a képernyő méretéhez képest.
A kép helyzetének finomhangolása és a burkolás elkerülése
A böngésző választhatja azt is, hogy a háttérképet csempékként jelenítse meg, annak méretétől függően. Ennek megakadályozása érdekében használja no-repeat:
background-repeat: no-repeat;Ahhoz, hogy a dolgok szépek maradjanak, a képünket mindig középen tartjuk:
background-position: center center;Ez a képet mindig vízszintesen és függőlegesen is középre állítja.
Most egy teljesen érzékeny képet készítettünk, amely mindig a teljes hátteret lefedi:
html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } Hogyan javítsunk ki egy képet a görgetés közben
Most, csak abban az esetben, ha szöveget szeretne hozzáadni a háttérkép tetejére, és ez a szöveg túlcsordítja az aktuális nézetablakot, érdemes lehet biztosítani, hogy a kép a háttérben maradjon, amikor a felhasználó lefelé görget a szöveg többi részének megtekintéséhez:
background-attachment: fixed;Rövid jelöléssel felveheti az összes fent leírt háttértulajdonságot:
background: url(image.jpg) center center cover no-repeat fixed;Opcionális: Hogyan adjunk hozzá Media Query for Mobile-t
Ha habot szeretne adni a tortán, érdemes hozzáadni egy média lekérdezést kisebb képernyőkhöz:
@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } A Photoshop vagy más képszerkesztő szoftver segítségével kicsinyítheti az eredeti képet, hogy javítsa az oldal betöltési sebességét a mobilinternet-kapcsolatokon.
Tehát most, hogy ismeri a reszponzív, teljes oldalas kép háttér létrehozásának varázsát, itt az ideje, hogy hozzon létre néhány gyönyörű webhelyet!
További webfejlesztési tippeket és ismereteket szeretne látni?
- Iratkozzon fel a heti hírlevelemre
- Látogassa meg a blogomat az 1000 Mile World címen
- Kövess a Twitteren