How to Full Page Background Image Using HTML And CSS

0

In this tutorial we will show you how to add full page background image using HTML and css. We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword. You may also like How to Fullscreen Background Video Using HTML And CSS.

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>