Jeg ønsker, at mit baggrundsbillede skal strækkes og skaleres afhængigt af størrelsen af browserens visningsområde.
Jeg har set nogle spørgsmål på Stack Overflow, der gør jobbet, som Stretch and scale CSS background for eksempel. Det fungerer godt, men jeg vil gerne placere billedet ved hjælp af background
, ikke med et img
-tag.
I den er der placeret et img
tag, og så med CSS tributerer vi til img
tagget.
width:100%; height:100%;
Det virker, men det spørgsmål er lidt gammelt, og der står, at i CSS 3 vil resizing af et baggrundsbillede virke ret godt. I've prøvet dette eksempel den første, men det virkede ikke for mig.
Er der en god metode til at gøre det med background-image
-deklarationen?
Ved hjælp af den kode, jeg nævnte...
<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%;
}
Det giver den ønskede effekt: kun indholdet ruller, ikke baggrunden.
Baggrundsbilledet tilpasses til browserens visningsområde uanset skærmstørrelse. Når indholdet ikke passer til browserens visningsområde, og brugeren skal rulle siden, forbliver baggrundsbilledet fast i visningsområdet, mens indholdet ruller.
Med CSS 3 ser det ud til at være meget nemmere.
Ønsker du at opnå dette ved kun at bruge ét billede? For du kan faktisk lave noget, der ligner en strækkende baggrund, ved at bruge to billeder. PNG billeder for eksempel.
Jeg har gjort det før, og det er ikke så svært. Desuden tror jeg, at stretching bare ville skade kvaliteten af baggrunden. Og hvis du tilføjer et stort billede, ville det gøre langsomme computere og browsere langsommere.