How to Full Page Background Image Using HTML And CSS

admin | Posted on May 10, 2021 |

This tutorial will show you how to add a full-page background image using HTML and CSS. We set a fixed and centered background on it and then adjust its size using a background-size set to the cover keyword.

HTML and CSS Code

<html>
<head>
<style>
body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#81DAF5;

 background: url(blogMainImage.png )no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
h1
{
 margin-top:150px;	
 color:white;
 font-size:45px;
}
</style>
</head>
<body>
    
<div id="wrapper">
    <h1>Full Size Image Background</h1>
</div>
</body>
</html>

Leave a Reply Cancel reply