It seems like I might be overlooking something simple, but I have 4 sections, each with a background image similar to this one and appearing one after the other:
.bg {
background-image: url("../images/bg1.jpg");
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
The HTML for each of the 4 sections looks like this (using Bootstrap, by the way, in case it matters!):
<div class="container-fluid">
<div class="bg bg-1 col"></div> <!-- The image container -->
<div id="first-section-content" class="col-8 ml-lg-5 titles-home">
<h1 class="mb-0">Title</h1>
<h4 class="pt-3">Subtitle</h4>
</div>
</div>
Everything appears perfectly on my desktop across all browsers, and even the developer tools show no issues at any resolution. However, after deploying it (on Heroku, by the way), the background images display correctly on desktop but are at 100% size on my mobile device, causing them to be zoomed in to their actual sizes rather than fitting within the viewport, resulting in only the top left part being visible.
I'm puzzled as to why I can't see the entire image when using vh and vw...
Can someone please assist me with this issue? Thank you!