I've often seen background images being resized on designer websites and wondered, how do they do that? Anyway, here's how.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>
No comments:
Post a Comment