How to create a full page background image with CSS?
Simply adding a background image to a webpage may or may not perfectly fit the entire webpage. If the image is too large it will add the scrolls or if the image is small it will leave the place vacant. So, to deal with this issue we can use CSS properties to create a page background image.
Full-page background image
To add a full-page background image first set the height of html and body element to 100%. Use a container element to add a background image. Set the height of the container element to 100%. Use the background-size:cover property so that the image scales to fit the entire page.
Example: Creating a full-page background image
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
}
.container {
background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627104666-101156.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Full page background image using contain value
We can also use contain value instead of cover value to stretch the image to fill the entire image.
Conclusion
We can easily create a full-page background image using CSS properties. Add height: 100% to HTML, body, and container element. In addition to that use background-size property as well.
