Looking to create a Bootstrap Jumbotron that features a background image, text (h1 and p), and a call-to-action button that scales appropriately for different viewports without sacrificing formatting. Essentially, the goal is for the div to behave like an image when it comes to scaling.
A project has been started to experiment with this concept at: https://codepen.io/Codewalker/pen/xxKRLBd. Various attempts using transitions and transforms have been made, but the desired display behavior hasn't been achieved yet as the div continues to act responsively.
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="https://picsum.photos/id/1056/1424/562" alt="test" class="img-fluid">
<div class="heroContent">
<h1>Jumbotron H1 goes here</h1>
<p class="pHero">
This is the first line in the jumbotron.<br>
The second line appears underneath the first line.
</p>
<button type="button" class="btn btn-primary">Chat With Us</button>
</div>
</div>
</div>
</div>
.container {
max-width: 1424px;
}
.heroContent {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
}
The main objective remains for the entire div to scale seamlessly while maintaining its original layout and format, akin to how images adjust in size.