Tegenwoordig is er veel vraag naar websites met responsieve achtergrondafbeeldingen. Responsieve websites bieden gebruikers een ideale gebruikerservaring op vrijwel alle apparaten, inclusief mobiele telefoons, tablets of desktops. Responsieve afbeeldingen kunnen de achtergrond van de website, schermgrootte en afmetingen aanpassen. Responsieve beelden zorgen ervoor dat de kwaliteit en proportie behouden blijven. Bovendien laadt de website met responsieve achtergrondafbeeldingen snel.
Deze handleiding geeft instructies om de achtergrondafbeeldingen aan te passen aan de schermafmetingen.
Hoe kan ik achtergrondafbeeldingen aanpassen aan de schermafmetingen?
Het beeld kan zich aanpassen aan de schermafmetingen door de onderstaande stapsgewijze instructies te doorlopen.
Stap 1: Maak een HTML-structuur
Maak eerst een HTML-structuur en voeg het externe stijlblad toe met behulp van de tag in het hoofdgedeelte van HTML. Plaats daarvoor eenvoudigweg de “ ' in het hoofdtag. De ' rel ”-tag specificeert de relatie van het bestand met het HTML-document. De ' href ”-tag specificeert het CSS-bestandsadres:
< html >
< hoofd >
< koppeling rel = 'stijlblad' href = 'stijl.css' >
< titel > Responsieve achtergrondafbeelding titel >
hoofd >
< lichaam >
-- Gebied om de andere inhoud toe te voegen-- >
lichaam >
html >
Stap 2: CSS toepassen
Pas nu de CSS toe op de “ lichaam ' sectie. Geef eerst de achtergrondafbeelding op. Gebruik daarvoor de “ achtergrond afbeelding ' en specificeer de ' url() ”-waarde die het adres van het afbeeldingsbestand bevat.
Gebruik daarna de “ achtergrond afbeelding ” om de afbeeldingsgrootte op te geven, de “ achtergrond herhaling ”-eigenschap om de herhaling van de afbeelding in te stellen, en “ achtergrondbijlage ” om in te stellen of de afbeelding met de rest van de pagina meeschuift of niet. Stel ten slotte de “ marge ' En ' opvulling ' naar ' 0 ”:
lichaam {achtergrondafbeelding: url ( 'test-afbeelding.jpg' ) ;
achtergrondgrootte: 100 % 100 % ;
/* Schaal de afbeelding naar 100 % breedte en 100 % hoogte */
achtergrondherhaling: geen herhaling;
achtergrondbijlage: vast;
marge: 0 ;
opvulling: 0 ;
/* Optioneel: Vaste achtergrond */
}
Uitvoer
Dit is de uitvoer voordat het browservenster wordt samengetrokken:
Na samentrekking van de browser:
De bovenstaande uitvoer bevestigt dat de afbeelding de achtergrond heeft aangepast aan de schermafmetingen.
Conclusie
Om achtergrondafbeeldingen aan te passen aan de schermafmetingen, voegt u eerst de “ uitkijk postje ' in het hoofdgedeelte om de afmetingen en schaling te regelen. Maak vervolgens een HTML-structuur en pas CSS toe. Stel in CSS de “ achtergrondgrootte ‘eigendomswaarde naar de’ omslag ”-waarde om de hoogte en breedte van een afbeelding te schalen. In dit artikel wordt een complete handleiding gepresenteerd voor het aanpassen van achtergrondafbeeldingen aan de schermafmetingen.