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

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

Answer 4

好吧，我可以提出另一个解决方案：我把它添加到身体中，你需要照顾的是，背景附件：修复是最后一条规则：

工作的：

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

真的很可怜，手机浏览器一般来说有点儿马车......

Answer 5

使用HTML背景代替正文，并提供高度：100％＆＃39;

＆＃13;

html {
    height:100%;
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

＆＃13;

Answer 6

我找到了另一种使用bit jquery的解决方案。该修复基于一个假设，即我们使用横向维度/比例的图像作为背景。

步骤1：比较“窗口高度”和“页面内容高度”

步骤2：如果“窗口高度”小于“页面内容高度”

第3步：将其应用于body标签

HTML {

<body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

<强>脚本

var wHeight = $(window).height();
    var bodyHeight = $('page-content-element').height();
    if(wHeight < bodyHeight){
        $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;');
    }
    else{
        $('body').removeAttr('style');
    }

在页面加载和窗口调整大小

上调用它

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

6 个答案: