Как сделать фоновое изображение под размер видимой области на мобильном устройстве?
Когда открываешь сайт на мобильном устройстве, видно, что фоновое изображение зависит от количества контента на странице, там где его больше - фоновое изображение увеличивается, где меньше - уменьшается. Так например при открытии панели навигации на мобильном устройстве видно что фон резко увеличивается, так как панель раздвигается и становиться больше контента. Как сделать так, чтобы фон не зависел от количества контента, зависел только от области просмотра.
Что есть на данный момент в css и html
<body class="bg-image1">
body {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.bg-image1 {
background-image: url(путь);
}