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:

Demo - Full-page background image

Demo - Half-page background image

How to create a full-height image

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

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

Note:To ensure that the image covers the entire screen, you must also set height: 100% are applied simultaneously to <html> and <body>:

Full-page background image:

body, html {
  height: 100%;
{}
.bg {
  /* The image used */
  background-image: url("dancer.jpg");
  /* Full height */
  height: 100%;
  /* Nicely centers and scales the image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}

Try It Yourself

Half-page background image:

.bg {
    height: 50%;
{}

Try It Yourself