背景下的白色空间覆盖响应

时间:2014-08-14 23:25:49

标签: html css responsive-design

我正在尝试创建一个响应式网站,但遇到了后台问题。它没有伸展的方式。

这是我的代码的小提琴: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;
}

当你使小提琴更窄,白色空间出现在底部时,你最能看到我的问题。它还显示了我的手机上的空白区域,这很奇怪,因为我添加了该大小的媒体查询。

任何想法如何让它一直延伸到底部?我尝试在底部添加透明边框和填充,但都无济于事。

谢谢! :)

2 个答案:

答案 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;
}

小提琴:http://jsfiddle.net/8jd1hax4/2/

答案 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/
祝你好运!