Background-size: обложка не работает в портрете на планшете Android

Я использую свойство background-size для полного фонового изображения ширины и высоты, но у него проблемы с его полным покрытием в Chrome на планшете Nexus7 в портретном режиме. Он охватывает только ширину, а не высоту, т.е. Ниже 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')";
}

Портретный снимок экрана:

Ответы

Ответ 1

Я считаю, что вы можете исправить это, указав высоту тегов html и body в CSS, например:

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

надеюсь, что это поможет

Ответ 2

Я знаю, что прошло много времени с тех пор, как был задан вопрос, но я только что нашел ответ, который я думаю. Для меня фоновый размер: обложка работает в Android Browser и 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-браузер.

Ответ 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;
    }
}

Это работало кросс-браузер и на мобильных устройствах. Я нашел решение здесь.

Ответ 4

Ну, я могу придумать другое решение: Я добавил его к телу, и все, что вам нужно позаботиться, это то, что привязка background: 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

Используйте HTML-фон вместо тела и дайте "height: 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;
}

Ответ 6

Я выяснил другие решения, используя бит jquery stuff. Исправление основано на предположении, что мы используем изображение в ландшафтном измерении/пропорции для фона.

step1: сравните "высоту окна" и "высоту содержимого страницы"

step2: если "высота окна" меньше, чем "высота содержимого страницы"

step3: применить это к тегу body

HTML {

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

}

script

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

вызвать это на загрузку страницы и изменить размер окна

Ответ 7

Это решение сработало для меня и для Android

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