resizable background image
I have the following code but my image won't resize, how come? Does the image need to be bigger?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>blah</title>
<style type="text/css" media="screen, print, projection">
img#background {
position: absolute;
top: 0;
left: 0; 开发者_Go百科
width: 100%
height: 100%;
}
</style>
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
</body>
</html>
You also need this:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:0;
padding:0;
}
Note, using css3 you can do this:
body{
background:url(...) no-repeat;
background-size: 100%;
}
Edit: Missed a ;
Demo:
http://jsfiddle.net/jJT45/
You're setting it to 100%, but 100% of what? Try giving the body the same 100% height and width properties and see what happens.
加载中,请稍侯......
精彩评论