Recently, we wanted to set the image as full cover background and this image should remain static as user scrolls the page. This can easily be done using CSS as below,
<html>
<style>
body, html {
background-image: url('http://www.greenecosystem.in/blog/images/sprout.jpeg');
background-attachment: fixed;
background-size: cover;
}
</style>
<body>
<h1>It works!</h1>
<p>This is the default web page for this server.</p>
<p>The web server software is running but no content has been added, yet.</p>
</body>
</html>This is a template, you can test in your local Linux PC by copying to /var/www/html/index.html and then opening it in browser as http://localhost/index.html
As you can see here, our cover image is uploaded at http://www.greenecosystem.in/blog/images/sprout.jpeg and then we used “background-image” css tag to use this image and then set two mote variables which are important to keep the image as static and make sure it covers the complete background. Those are, “background-attachment: fixed” and “background-size: cover”