Background-size: обложка оставляет пустое место в Chrome для Android

Я пытаюсь получить хороший фон в полноэкранном режиме для моего сайта. Он работает нормально почти в каждом браузере, который я тестировал в (browsershots.org), но в Chrome на моем Android-планшете он работает не так, как ожидалось. Как вы можете видеть там много белых в фоновом режиме, где должно быть все изображение.

Ссылка: http://test.socie.nl

CSS:

body {
    background: url(../../images/background/image1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Неожиданный результат:

Ответы

Ответ 1

Кажется, это четырехлетняя ошибка, которую игнорируют команда Android/Chrome:

https://code.google.com/p/android/issues/detail?id=3301

http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo

Я пробовал каждое решение, которое я мог найти, упомянутое в этих ссылках и других местах; все проваливается на Android 4.3 Chrome 30. Все ухудшается в родном браузере Android 2.3.

Тот, с которым я иду, - это:

.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
    }

(I. то, что CSS переместился из body в класс под названием body), а затем в HTML я:

<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>

(Кстати, техника, которую вы видите там, чтобы поддерживать нижний колонтитул в нижней части окна, кажется, не вызывает проблемы, как в моем первом наборе экспериментов, я лишил этого.)

Кроме того: Я был удивлен тем, что Firefox для Android также ошибочно работает с обложкой фона: обложка. Они используют один и тот же движок рендеринга?!

Ответ 2

Обновлен метод, опубликованный выше (как опубликовано здесь).

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

Хотя проблема в исходном вопросе сохраняется, несмотря на обновление. Что сработало для меня, это добавление полной ширины и высоты в html CSS в дополнение к вышесказанному:

html {
    width: 100%;
    height: 100%
}

Ответ 3

Вместо фонового изображения попробуйте вместо этого использовать <img>:

HTML:

<img src="imagepath" id="your-id" />

CSS:

#your-id{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}

Ответ 4

Решено, добавив следующее:

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

body {
   min-height:100%;
}

Ответ 5

На самом деле ВСЕ, мне нужно , если вы используете тег html:

height: 100%;

... с оговоркой, что изображение будет немного изменяться, когда вы прокрутите панель меню вне поля зрения, но я думаю, что все другие ответы также имеют эту проблему.