我正在尝试创建一个响应式网站,但遇到了后台问题。它没有伸展的方式。
这是我的代码的小提琴:http://jsfiddle.net/8jd1hax4/ 这是我的CSS背景
body{
background-image:url('Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
max-width:100%;
max-height:100%;
font-family: 'Scout', arial, sans-serif;
color:#fff;
}
当你使小提琴更窄,白色空间出现在底部时,你最能看到我的问题。它还显示了我的手机上的空白区域,这很奇怪,因为我添加了该大小的媒体查询。
任何想法如何让它一直延伸到底部?我尝试在底部添加透明边框和填充,但都无济于事。
谢谢! :)
答案 0 :(得分:3)
在身体上拥有背景的问题在于身体不一定是全屏,而是只有屏幕和内容一样多。因此,当你调整大小并缩短内容时,身体会缩短。
一种解决方案是在内容周围添加包装标记:
<body>
<div class="wrapper">
(All other content goes here)
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.wrapper {
background-image:url('http://capeanntunaclub.com/images/Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
font-family: 'Scout', arial, sans-serif;
}
答案 1 :(得分:3)
对于记录,这是您的另一个选择:http://jsfiddle.net/panchroma/xrz4v4L4/
重要的是我在html元素上设置背景图片,因此它确保包含浏览器窗口的完整高度。
html {
background: url(http://capeanntunaclub.com/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
此解决方案和其他解决方案的功劳归于http://css-tricks.com/perfect-full-page-background-image/
祝你好运!