背景图像没有完全伸展
问题描述:
我刚刚推出了一个网站,并认为它没有奇怪的CSS错误,但显然它不是。我在这里想要做的是拉伸图像以适应页面的高度和宽度。背景图像没有完全伸展
问题: 我有以下的标记:
<img src="images/night_sky7.jpg" class="stretch" />
下面CSS应用到它:
img.stretch {
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
这是工作在我的17.1' 笔记本电脑罚款1440分辨率,但我注意到它在其他屏幕分辨率下无法正常工作。会发生什么是背景不会伸展到底部,而是低于底部甚至到页面中间。
现在,我试着改变了很多CSS,但我无法让它完全拉伸。
任何帮助表示赞赏。
你可以测试的网址是:http://bit.ly/eOEzXJ。
如果有必要,我可以做任何一件事:在Photoshop
- 更改图像的任何尺寸
- 添加任何JS或CSS,但高度:100%;解决方案不起作用,至少,不是因为我可以看到
答
试着这样做:
body {
height: 100%;
}
img.stretch {
// your stuff
height: 100%
}
我注意到你也有一个包装CSS类。你想也需要补充一点:
#wrapper {
height: 100%;
}
答
Chuck的正确的轨道上,但是您可能需要添加
html {
height: 100%;
}
为好。
答
你可能只想在HTML img标签的高度和宽度设置为100%
<img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>
您可能要改写这个。看起来你正在试图让一个元素的背景延伸,这是不能用CSS来完成的。 – meagar 2010-12-07 16:40:10
你不应该拉伸图像,你应该总是使用背景重复,如果你想重复, – kobe 2010-12-07 16:47:51