Sådan oprettes: Hel sides billede

Lær hvordan du bruger CSS til at oprette et baggrundsbillede for hele siden.

Hel sides billede

Lær hvordan du opretter et baggrundsbillede, der dækker hele browservinduet. Følgende eksempel viser et responsivt baggrundsbillede (hel side og halvside):

Demonstration - Hel sides baggrundsbillede

Demonstration - Halvsides baggrundsbillede

Sådan oprettes en helt høj image

Brug en beholderselement, og tilføj et baggrundsbillede med en højde på 100% til beholderen.

Tip:Brug af 50% kan oprette en halvside baggrundsbillede. Brug derefter følgende baggrundsegenskaber til at centrere og skalere billedet perfekt:

Bemærk:For at sikre, at billedet dækker hele skærmen, skal du også sætte height: 100% anvendes samtidig på <html> og <body>:

Baggrundsbillede for hele siden:

body, html {
  height: 100%;
}
.bg {
  /* Brugt billede */
  background-image: url("dancer.jpg");
  /* Hele højde */
  height: 100%;
  /* Centrer og skalere billedet godt */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Prøv det selv

Halvside baggrundsbillede:}

.bg {
    height: 50%;
}

Prøv det selv