How to create: Full-page image

Learn how to use CSS to create a full-page background image.

Full-page image

Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and half-screen) responsive background image:

Demonstration - Full-page background image

Demonstration - Half-page background image

How to create full-height image

Use a container element and add a background image of 100% height to the container.

Tips:Using 50% can create a half-page background image. Then use the following background properties to perfectly center and scale the image:

Varning:To ensure the image covers the entire screen, you must also set height: 100% applies together to <html> och <body>:

Hela sidans bakgrundsbild:

body, html {
  height: 100%;
}
.bg {
  /* Använda bild */
  background-image: url("dancer.jpg");
  /* Full höjd */
  height: 100%;
  /* Bra centrering och skalning av bilden */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Prova själv

Halvsidobakgrundsbild:}

.bg {
    height: 50%;
}

Prova själv