Želim, da se moja slika ozadja raztegne in razširi glede na velikost vidnega polja brskalnika.
Na Stack Overflow sem videl nekaj vprašanj, ki opravljajo to nalogo, na primer Stretch and scale CSS background. Deluje dobro, vendar želim sliko postaviti s pomočjo podlage
in ne s pomočjo oznake img
.
V tem primeru je postavljena oznaka img
, nato pa se s CSS poklonimo oznaki img
.
width:100%; height:100%;
Deluje, vendar je to vprašanje nekoliko staro in navaja, da bo v CSS 3 spreminjanje velikosti slike ozadja delovalo precej dobro. Poskusil sem to prvi primer, vendar se mi ni obneslo.
Ali obstaja dobra metoda za to z deklaracijo background-image
?
Z uporabo kode, ki sem jo omenil...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
To ustvari želeni učinek: pomika se samo vsebina, ne pa tudi ozadje.
Slika ozadja spremeni velikost glede na vidno polje brskalnika za vsako velikost zaslona. Kadar se vsebina ne prilega vidnemu polju brskalnika in mora uporabnik pomakniti stran, slika ozadja ostane fiksirana v vidnem polju, medtem ko se vsebina pomika.
Zdi se, da bi bilo s CSS 3 to veliko lažje.
Z oznako img lahko dejansko dosežete enak učinek kot slika ozadja. Njen z-indeks morate nastaviti nižje kot vse ostalo, nastaviti position:absolute in za vsako polje v ospredju uporabiti prozorno ozadje.
Ali želite to doseči z eno samo sliko? Z dvema slikama lahko dejansko ustvarite nekaj podobnega raztegljivemu ozadju. PNG slike, na primer.
To sem že naredil in ni tako težko. Poleg tega mislim, da bi raztegovanje samo poslabšalo kakovost ozadja. In če bi dodali veliko sliko, bi to upočasnilo počasne računalnike in brskalnike.