How to create a background image in HTML
A background image can be added to the page background by means of HTML. CSS nevertheless is always required to position the image correctly. You have two possible options to realize a background image on your website’s page. Please find below two examples which will clarify both the options:
Example 1: HTML & CSS (IE7 & IE8 compatible)
This background image example uses an image which covers the whole background of your website. The image will always cover the whole background, no matter which resolution is used by your visitors. The image therefore is stretched out to cover the whole screen.
<body>
<img src="background-image.jpg" class="background" />
<div class="wrapper">
All website content goes here
</div>
</body>
html,
body{
margin: 0;
padding: 0;
height: 100%;
}
img.background{
width: 100%;
height: 100%;
position:fixed;
top:0;
left:0;
}
.wrapper{
position:relative;
z-index:1;
width: 1024px;
margin: 0 auto;
}
Example 2: CSS3 (not IE7 & IE8 compatible)
Browsers are continuously improving which ensures more CSS3 support and compatibility than ever before. Because many browsers do support CSS3 your background image can be displayed my means of CSS3 only without the need of for example HTML code. Take into account though this background image option is not supported by Internet Explorer 8 and lower.
<html>
<head
</head>
<body>
<div class="wrapper">
All website content goes here
</div>
</body>
</html>
html {
background: url(background-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.wrapper{
position:relative;
z-index:1;
width: 1024px;
margin: 0 auto;
}