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>