My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll.
Is there a way to prevent my background from resizing? Check out this video of what happens on my mobile:
Here's the code:
html {
height: 100vh;
margin: 0;
width: 100%;
}
body {
margin: 0;
height: 100%;
;
width: 100%;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#header {
width: 100%;
height: 50px;
background-color: black;
}
#header img {
height: 6rem;
margin: 1rem;
}
#content {
width: 70%;
margin: auto;
background: yellow;
overflow: hidden;
}<body>
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. (Text repeats multiple times)
</div>
</body>I came across a similar question here: Stack Overflow - Background Image Jumps on Mobile Browser, but the solutions were not effective for me as they were outdated. Any new suggestions, preferably using only CSS or vanilla JavaScript if absolutely necessary?