How TO – Full Page Image
Learn how to create a full page background image with CSS.
How To Create a Full Height Image
Use a container element and add a background image to the container with height: 100%.
Note: To make sure that the image covers the whole screen, you must also apply height: 100% to both <html> and <body>:
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body, html {
height: 100%;
margin: 0;
}
.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;
}
</style>
</head>
<body>
<div></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
Half page background image:
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url(“img_girl.jpg”);
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
<p>This example creates a half page background image. Try to resize the browser window to see how it always will cover 50% of the screen, and that it scales nicely on all screen sizes.</p>
</body>
</html>