html - 制作全屏图像背景

我基本上想制作一个完整的视口(viewport)背景图像。

这是我的代码:

<html>
    <body>
        <div class="container">
        <img src="loginBg.png" height="100%" width="100%">  
    </div>
</html>

样式表如下:

.container{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

这种方法的问题是，图像是全屏的，但它下面有一些空间，因为这个空间页面是可滚动的。我在 firefox ubuntu 上查了下，没有空白。

提前致谢

最佳答案

真正的解决方案——CSS背景图片

结合 no-repeat 和 background-size 在主体上使用 CSS 背景图片。

body {
    background: url(http://www.placehold.it/200) no-repeat;
    background-size: cover;
}

注意:html,body { height: 100% } 允许百分比背景大小。

html,body {
  height: 100%;
}

body {
  background: #F00 url(http://www.placehold.it/200) no-repeat;
  background-size: 100% 100%;
}

阅读更多:

关于html - 制作全屏图像背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26194177/

相关文章：

html - 在 HTML 中，哪个元素不能包含其他一些特定元素？