I am experiencing an issue with the jumbotron images on my website where they become increasingly zoomed in as the screen size decreases, and are extremely zoomed in on mobile devices. Is this a normal behavior of jumbotrons? I do understand that the image needs to adjust to fit the screen, but is there a way to have it remain mostly fixed except in extreme cases? The code I utilized to create a parallax effect on the jumbotron images was sourced from w3schools. Below is the code snippet:
.jumbotron {
display: flex;
justify-content: center;
align-items: center;
background-image: url("./jumbo.jpg");
color: #ffffff;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 116px;
}
/* From w3schools - https://www.w3schools.com/howto/howto_css_parallax.asp */
.parallax {
/* The image used */
background-image: url("./jumbo.jpg");
/* Set a specific height */
min-height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}
Example usage in html:
<section class="jumbotron parallax image-overlay" style="background-image: url(./deadgrass.jpg);">
<div class="row justify-content-center">
<div class="col-auto text-center">
<h2>Contact Me</h2>
</div>
</div>
</section>