I dag er nettsteder med responsive bakgrunnsbilder etterspurt. Responsive nettsteder gir brukerne en ideell brukeropplevelse på nesten alle enheter, inkludert mobiler, nettbrett eller stasjonære datamaskiner. Responsive bilder kan tilpasse bakgrunnen til nettstedet, skjermstørrelse og dimensjoner. Responsive bilder sørger for at kvaliteten og proporsjonene opprettholdes. I tillegg lastes nettsiden med responsive bakgrunnsbilder raskt.
Denne veiledningen vil gi instruksjoner for å tilpasse bakgrunnsbildene til skjermdimensjoner.
Hvordan tilpasse bakgrunnsbilder til skjermdimensjoner?
Bildet kan tilpasses skjermdimensjonene ved å gå gjennom de trinnvise instruksjonene nedenfor.
Trinn 1: Lag en HTML-struktur
Lag først en HTML-struktur og legg til det eksterne stilarket ved hjelp av tag i head-delen av HTML. For det formålet er det bare å plassere ' ” inne i hodemerket. « rel ”-taggen spesifiserer filens forhold til HTML-dokumentet. « href '-taggen spesifiserer CSS-filadressen:
< html >
< hode >
< link rel = 'stilark' href = 'style.css' >
< tittel > Responsivt bakgrunnsbilde tittel >
hode >
< kropp >
-- Område for å legge til annet innhold -- >
kropp >
html >
Trinn 2: Bruk CSS
Bruk nå CSS på ' kropp ' seksjon. Først spesifiser bakgrunnsbildet. For det formålet, bruk ' bakgrunnsbilde ' og spesifiser ' url() ”-verdi som inneholder bildefiladressen.
Etter det bruker du ' bakgrunnsbilde ' for å spesifisere bildestørrelsen, ' bakgrunnsgjenta '-egenskapen for å angi gjentakelsen av bildet, og ' bakgrunnsvedlegg ” for å angi om bildet skal rulle med resten av siden eller ikke. Til slutt, sett ' margin ' og ' polstring ' til ' 0 ':
kropp {bakgrunnsbilde: url ( 'test-image.jpg' ) ;
bakgrunnsstørrelse: 100 % 100 % ;
/* Skaler bildet til 100 % bredde og 100 % høyde */
bakgrunns-gjenta: ikke-gjenta;
bakgrunnsvedlegg: fast;
margin: 0 ;
polstring: 0 ;
/* Valgfritt: Fast bakgrunn */
}
Produksjon
Dette er utdata før du trekker sammen nettleservinduet:
Etter sammentrekning av nettleseren:
Utgangen ovenfor bekrefter at bildet har tilpasset bakgrunnen til skjermdimensjonene.
Konklusjon
For å tilpasse bakgrunnsbilder til skjermdimensjoner, inkluderer du først ' viewport ” i hodedelen for å kontrollere dimensjoner og skalering. Deretter oppretter du en HTML-struktur og bruker CSS. I CSS, sett ' bakgrunnsstørrelse ' eiendomsverdi til ' dekke ”-verdi for å skalere et bildes høyde og bredde. Denne artikkelen har presentert en komplett guide for å tilpasse bakgrunnsbilder til skjermdimensjoner.