Обложка фоновое изображение не правильно На некоторых мобильных устройствах

У меня есть сайт, который использует фон с размером «обложки» для верхней части страницы. Изображение должно изменяться в зависимости от разрешения экрана, но некоторые устройства показывают изображение с настольной или планшетной версии. Веб-сайт rookmgmt.ca, и я включу соответствующий код HTML и CSS.

Edit: чтобы быть более точным, изображение слишком большое на некоторых устройствах. Вместо городской линии горизонта, он показывает только верхнюю часть неба. Он работает на моем телефоне и других устройствах, которые я тестировал лично, но не на каждом устройстве.

HTML

<div class="fixed-background bg-1">
            <div class="container">
                <div class="title">
                    <h1>ROOK PROPERTY<br>
                        MANAGEMENT INC.</h1>
                    <h2>CONDOMINIUM MANAGEMENT</h2>
                </div>
            </div>
        </div>

стиль CSS

.fixed-background {
    height: 800px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

.fixed-background.bg-1 {
    background-image: url("../images/IMG_6642-2_mobile.jpg");
}

мета-бирки

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 767px)" href="css/styles_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1199px)" href="css/styles_tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="css/styles_desk.css">

1 ответ