CSS CHALLANGE：背景图像以100％的高度 - 当空白滚动移动 [英] CSS CHALLANGE: Background-Image with 100% height - White Space when Scrolling Mobile
问题描述
CSS Challange：
CSS Challange:
这CSS得到我的背景，填补了屏幕高度的100％，但有一个小问题 - 当你向下滚动，有最初的空白，那么当你松开手指，停止滚动背景图像调和填充屏幕高度的100％一次。该问题不会在同一页上，如果你继续滚动，只需在第一时间再次发生。可能有人请帮忙吗？谢谢
This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time. Could someone please help? Thanks
<body>
<div class="background"></div>
<div class="content"></div>
</body>
和CSS的：
html{
height:100%;
}
.background{
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
background-image: url('../image/backgroundpicture.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 10%;
}
.content{
width:100%;
height:200px;
position:relative;
z-index:1;
top:1800px;
}
问题是有太多，当我把背景图像中的身体！
The Problem is there too, when i put the background-image in the Body!
推荐答案
希望有一天，有人能制定出一个扎实的工作周围，改变高度观点...
Wish that one day someone could work out a solid work around for a viewpoint that changes height...
我已经尝试了很多不同的想法，仍然无法找到一个行之有效的。
I have tried a lot of different ideas, and still can't find one that works well.
这是我发现的最好的是阅读（窗口）.height（），并添加60像素占标题栏，并调整包含背景的高度元素..
The best that I have found is to read the (window).height() and add 60px to account for the title bar, and resize the element containing the background to that height..
它仍然不是最好的，因为60像素不会永远是现货上你只是扩大过去更小的尺寸观点后台..
Its still not the best as 60px will not always be spot on and you are just expanding the background past the smaller viewpoint size..
如果当时只有一种方式来获得最大视点大小，然后将解决所有问题：（
If there were only a way to get the max-viewpoint size then that would solve everything :(
这篇关于CSS CHALLANGE：背景图像以100％的高度 - 当空白滚动移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
