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 full-height image

Use a container element and add a background image with a height of 100% 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 at the same time <html> and <body>:

Full page background image:

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

جرب بنفسك

صورة خلفية نصف الصفحة:}}

.bg {
    height: 50%;
}

جرب بنفسك