Hoe - Afbeelding op volledige pagina
Leer hoe u een paginagrote achtergrondafbeelding maakt met CSS.
Afbeelding op volledige pagina
Leer hoe u een achtergrondafbeelding maakt die het hele browservenster beslaat. Het volgende voorbeeld toont een responsieve achtergrondafbeelding op volledig scherm (en een half scherm):
Demo - Achtergrondafbeelding op volledige pagina
Demo - Achtergrondafbeelding halve pagina
Een afbeelding op volledige hoogte maken
Gebruik een containerelement en voeg een achtergrondafbeelding toe aan de container met height: 100%
.
Tip: gebruik 50% om een achtergrondafbeelding van een halve pagina te maken. Gebruik vervolgens de volgende achtergrondeigenschappen om de afbeelding perfect te centreren en te schalen:
Opmerking: om ervoor te zorgen dat de afbeelding het hele scherm bedekt, moet u ook toepassen height: 100%
op zowel <html> als <body>:
Voorbeeld
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Achtergrondafbeelding halve pagina:
Voorbeeld
.bg {
height: 50%;
}