THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Full Page Image


Learn how to create a full page background image with CSS.


Full Page Image

Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and a 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 to the container with height: 100%. Tip: Use 50% to create a half page background image. Then use the following background properties to center and scale the image perfectly:

Note: To make sure that the image covers the whole screen, you must also apply height: 100% to both <html> and <body>:

Example

body, html {
    height: 100%;
}

.bg {
    /* The image used */
    background-image: url("img_girl.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
Try it Yourself »

Half page background image:

Example

.bg {
    height: 50%;
}
Try it Yourself »