背景大小：封面不能在Android平板电脑上的肖像工作

我使用background-size属性的全宽和高背景图像，但无法让它完全覆盖在纵向视图Nexus7平板电脑上的Chrome浏览器。 它只覆盖宽度而不是高度，即它下面有大约200px的空白。 但是，当我在桌面Chrome浏览器（或其他任何地方）中查看网站并在垂直显示器上模拟纵向尺寸时，它不会造成任何问题。

任何人都有解决scheme？

CSS： 

 html { background: url(http://img.dovov.compost_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='http://img.dovov.compost_bg.jpg', sizingMethod='scale')"; }

肖像屏幕截图：

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

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

希望这可以帮助

我知道这个问题已经过了很长时间，但我刚刚find了答案。 对于我来说，background-size：如果你在后台CSS指令中省略了“fixed”，那么cover就可以在Android Browser和Android Chrome中运行。 经过一些testing，它使我成为一个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，但对我来说，它适用于我已经testing的所有浏览器（FF，Chrome，IE8，IE9，Safari），在iPad2和Android Chrome上Android浏览器。

我会提供我发现的解决scheme，以防将来遇到这种情况。 我没有使用背景图片，而是使用了<img> ：

HTML： 

 <img id="full_bg" src="http://img.dovov.compost_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; } }

这工作跨浏览器和移动设备上。 我在这里find了解决scheme。

那么，我可以想出另一个解决scheme：我把它添加到身体，所有你需要照顾的是，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; }

这真的是一个可怜的，一般来说，电话是一个小马车…

使用HTML背景，而不是身体，给一个'身高：100％' 

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

我已经find了另一个解决scheme，使用一些jQuery的东西。 该修复程序基于一个假设，即我们正在使用横​​向尺寸/比例的图像作为背景。

第一步：比较“窗口高度”和“页面内容高度”

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

第3步：将其应用于身体标记

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

调用此页面加载和窗口resize

这个解决scheme也适用于我的Android 

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

    修复了与ios7的背景图像