background-size:在Android平板电脑上覆盖不在纵向工作

Question

我正在使用该background-size属性获得完整的宽度和高度背景图像,但无法在纵向视图中将其完全覆盖在Nexus7平板电脑上的Chrome中.它只覆盖宽度而不是高度,即200px它下面有大约白色空间.但是,当我在桌面Chrome(或其他任何内容)和垂直监视器上查看网站以模拟纵向尺寸时,它没有任何问题.

有人有解决方案吗？

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

肖像屏幕截图:

Answer 1

我相信你可以通过在CSS中定义html和body标签的高度来修复它,如下所示:

html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

希望这可以帮助

Answer 2

我知道问题问题已经很长时间了,但我刚才找到了答案.对我来说背景大小:封面适用于Android浏览器和Android Chrome,如果省略后台CSS指令中的"修复".经过一些测试,它适用于我使图像成为DIV的背景:

#yourDivSelectorHere { 
width: 100%;
height: 100%;  
position: fixed;
top: 0;
left: 0;
z-index: 0; 
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

DIV本身固定在适当位置(与背景图像相对),宽度和高度均为100%,并放置在所有物体的背面.这是一个额外的努力,而不是只是将背景图像添加到HTML或BODY,但对我来说它适用于我迄今为止测试过的所有浏览器(FF,Chrome,IE8,IE9,Safari),iPad2和Android Chrome以及Android浏览器.

Answer 3

我将提供我发现的解决方案,以防将来有人遇到此问题.我没有使用背景图片,而是使用了<img>:

HTML:

<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS:

#full_bg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #full_bg {
        left: 50%;
        margin-left: -512px;
    }
}

这适用于跨浏览器和移动设备.我在这里找到了解决方案.

Answer 4

好吧，我可以想出另一种解决方案：我将其添加到主体中，而您需要照顾的是，background-attachment：fixed是最后一条规则：

作品：

body {
        height:100%;
        width:100%;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center center;
        background-attachment:fixed;
}

不起作用：

body {
            height:100%;
            width:100%;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-position: center center;
}

总体来说，电话浏览器有点越野车，这确实很可惜...