web-dev-qa-db-ja.com

background-size：Androidタブレットでポートレートでカバーが機能しない

幅と高さの全背景画像に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')";
}

ポートレートスクリーンショット：

androidcss3google-chromecoverbackground-size
47
maceyj2

次のように、CSSでhtmlタグとbodyタグの高さを定義することで修正できると思います。

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

お役に立てれば

97
ackushiw

質問が出されてから長い時間が経ったことは知っていますが、私は思う答えを見つけました。私にとって、background-size：coverは、AndroidブラウザーとAndroid Chromeで動作します。バックグラウンドCSS命令で「fixed」を省略した場合。いくつかのテストの後、画像を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ブラウザー。

29
Paolo Mioni

将来誰かがこれに遭遇した場合に備えて見つけた解決策を提供します。背景画像を使用する代わりに、<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;
    }
}

これは、クロスブラウザおよびモバイルデバイスで機能しました。私は解決策を見つけました こちら 。

6
maceyj2

さて、私は別の解決策を考え出すことができます：私はそれを体に追加し、あなたが世話をする必要があるのは、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;
}

電話ブラウザが一般に少しバグがあるのは本当につまらないです...

5
BastianBalthasarBux

本文の代わりに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;
}
1
devCra

私は少しjqueryのものを使用して別のソリューションを見つけました。この修正は、背景にランドスケープの寸法/比率の画像を使用しているという仮定に基づいています。

ステップ1：「ウィンドウの高さ」と「ページコンテンツの高さ」を比較する

step2：「ウィンドウの高さ」が「ページコンテンツの高さ」より小さい場合

ステップ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');
    }

ページの読み込みおよびウィンドウのサイズ変更時にこれを呼び出します

0
Pons Purushothaman