Я знаю, это обсуждалось снова и снова. но это все еще, кажется, конкретная проблема понимания с моей стороны. после внесения нескольких исправлений здесь и в другом месте мой сайт все еще не работает, как хотелось бы.
Я получил фиксированное фоновое изображение в разделе заголовка моей страницы. это прекрасно работает на обычном браузере Chrome. однако я не могу запустить его на мобильном браузере Chrome
У меня есть следующие строки HTML:
<body id="page-top">
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
выровнен по следующим строкам CSS:
body {
font-family: 'Lato';
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
header{
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
например, я написал медиа-запрос высотой 100% с помощью команд, специфичных для браузера, и так далее:
@media (max-width: 576px){
header{
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;
}
}
и затем я попытался поместить y-overflow: scroll; к телу и скрыто в заголовке введите описание ссылки здесь
Кроме того, я попытался поместить изображение в div, как это введите описание ссылки здесь
HTML:
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container header">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
CSS:
.header{
position: fixed;
z-index: -1;
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
с этой техникой картина полностью исчезла
где-то я должен что-то упустить, не так ли?