After spending a considerable amount of time tweaking positions, z-index values, and other properties in an attempt to make Bootstrap work seamlessly on top of an image, I have arrived at what I believe is the most efficient code snippet.
img {
display: block;
max-width: 100%;
width: 100%;
height: 100%;
}
.link a {
border: 0;
border-radius: 0;
padding: 20px 35px;
background-color: black;
color: white;
font-size: 14px;
text-transform: uppercase;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row wrapper">
<img class="img-responsive something-img" src="http://placehold.it/900x100"/>
<div class="container">
<div class="row overlay">
<div class="col-sm-9">
<h2>here are some words about stuff</h2>
</div>
<div class="col-sm-3 link">
<a href="/place">view this thing</a>
</div>
</div>
</div>
</div>
</div>Despite trying various strategies such as setting position relative on the overlay, experimenting with absolute positioning, adjusting z-index values for the overlay and image, and even applying position absolute to the image (which unfortunately caused it to cover the next section of code), I am still unable to achieve the desired outcome. Any suggestions or tips would be greatly appreciated.