Hvordan strekke et bakgrunnsbilde for å passe til en nettside

Gi nettstedet ditt visuell interesse med bakgrunnsgrafikk

Hva du bør vite

• Foretrukket metode: Bruk CSS3-egenskapen for bakgrunnsstørrelse og sett den til dekke .
• Alternativ metode: Bruk CSS3-egenskapen for bakgrunnsstørrelse satt til 100 % og bakgrunnsposisjon satt til senter.

Denne artikkelen forklarer to måter å strekke et bakgrunnsbilde slik at det passer til en nettside ved hjelp av CSS3.

Den moderne måten

Bilder er en viktig del av attraktivt nettsteddesign . De gir visuell interesse til en side og hjelper deg med å oppnå designet du leter etter. Når du jobber med bakgrunnsbilder, vil du kanskje at et bilde skal strekke seg for å passe til siden til tross for bredt utvalg av enheter og skjermstørrelser .

Den beste måten å strekke et bilde for å passe til bakgrunnen til et element er å bruke CSS3 eiendom, for bakgrunnsstørrelse , og sett den lik dekke .

|_+_|

Ved å bruke eksemplet ovenfra med bakgrunnsstørrelse satt til 100 % i stedet kan du se at CSS ser stort sett likt ut.

Resultatet på en fullskjermsleser eller en med lignende dimensjoner som bildet er nesten identisk. Men med en smalere skjerm begynner feilene å vises.

Det er klart at det ikke er ideelt, men det vil fungere som en reserve.

I følge caniuse.com , fungerer denne egenskapen i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, og på alle de store mobilnettleserne. Dette dekker deg for alle moderne nettlesere som er tilgjengelige i dag, noe som betyr at du bør bruke denne egenskapen uten frykt for at den ikke vil fungere på noens skjerm.

Mellom disse to metodene bør du ikke ha noen problemer med å støtte nesten alle nettlesere. Som bakgrunnsstørrelse: omslag får enda mer aksept blant nettlesere, vil selv denne reserven bli unødvendig. Det er klart at CSS3 og mer responsiv designpraksis har forenklet og strømlinjeformet bruk av bilder som adaptive bakgrunner i HTML-elementer.