Pretty sure I'm missing something silly, but I have 4 sections, each with a background image as in this one and coming one after each 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 is about this for each of the 4 sections (with bootstrap, btw, if 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>
This looks all perfect on my desktop on all browsers, even developer tools shows no problem in any size, but after deploying it (Heroku, btw) while the background images are fine on desktop, they are 100% their sizes on my mobile so they are absolutely zoomed in to their actual size rather than contained in the viewport, so I can only see the top left part of them.
I don't understand why I'm not seeing the whole image if I'm using vh and vw...
Could you please help me? Thank you!