Большое фоновое изображение на html странице

Question

У меня есть веб-страница с большими изображениями внутри некоторых div, которые покрывают фон страницы. Тем не менее, я получаю странную проблему со страницей при просмотре страницы на панели Android, где страница просматривается на портрете (выглядит нормально при просмотре пейзажей). Страница получит синий цвет (тот же цвет, что и фон) в правой части экрана рядом с полосой прокрутки (см. Изображения ниже). Это может выглядеть так, как будто страница изначально становится неправильной, а затем, когда вы щелкаете, вы можете видеть синие. Как и изображения, они не нарисовались полностью или что-то в этом роде.

В голове страницы я поставил следующий тег:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

The я определил некоторые дивы, чтобы поместить изображения:

<div class="homebg_top">...</div> 

У меня есть 4 из этих див с разными фон внутри них.

Тогда в следующем в CSS (для приведенного выше определенного DIV):

.homebg_top { 
    background: url(../images/bg_home_top.jpg) no-repeat center top; 
    width: 100%; 
    height: 807px; 
    margin: 0; 
    padding: 0; 
} 

На рисунке ниже это страница, когда в ландшафтном режиме:

На картинке ниже когда он находится в портретном режиме
(обратите внимание на синий вопрос фона рядом с полосой прокрутки):

Answer 1

Попробуйте это:

.homebg_top { 
    background: url(../images/bg_home_top.jpg) no-repeat center top /cover; 
} 

Answer 2

Пример: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

.homebg_top { 
    width: 100%; 
    height: 807px; 
    margin: 0; 
    padding: 0; 
    background: url(../images/bg_home_top.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 3

вы можете попробовать thisone:

.homebg_top{ 
     background: url(http://media02.hongkiat.com/oversized-background-image-design/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://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')"; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale'); 
    } 

вы можете увидеть эту страницу http://www.hongkiat.com/blog/oversized-background-image-design/