Hoe te maken: Volledige pagina afbeelding

Leer hoe je een volledige pagina achtergrondafbeelding maakt met CSS.

Volledige pagina afbeelding

Leer hoe je een achtergrondafbeelding maakt die het hele browservenster dekt. Het volgende voorbeeld toont een responsieve achtergrondafbeelding die volledig (en half) het scherm dekt:

Demonstratie - Volledige pagina achtergrondafbeelding

Demonstratie - Halve pagina achtergrondafbeelding

Hoe een volledige hoogte afbeelding te maken

Gebruik een container-element en voeg een achtergrondafbeelding van 100% hoogte toe aan deze container.

Tip:Gebruik 50% om een halve pagina achtergrondafbeelding te maken. Gebruik vervolgens de volgende achtergrondkenmerken om het beeld perfect te centreren en te schalen:

Opmerking:Om ervoor te zorgen dat het beeld het hele scherm dekt, moet je ook height: 100% wordt tegelijkertijd toegepast op <html> en <body>:

Volledige pagina achtergrondafbeelding:

body, html {
  height: 100%;
{}
.bg {
  /* Gebruikte afbeelding */
  background-image: url("dancer.jpg");
  /* Volledige hoogte */
  height: 100%;
  /* Zeer goed gecentreerd en geschaald beeld centreren en het beeld nice schalen */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}

Try it yourself

Half-page background image:

.bg {
    height: 50%;
{}

Try it yourself