I'm working on a bootstrap layout with two columns, and I need to achieve a semi-opaque background image that covers the entire column with a dark overlay. This is to create contrast for a logo that will be centered within the column.
I've tried various methods but haven't been able to make it work responsively.
In the code snippet below, I want the coffee photo to cover the entire column as if it were a background image. The "object-fit" property isn't doing what I need, and I want to avoid any overflow beyond the column boundaries. The logo should be centered within the column, overlaying the photo. I'm using Bootstrap 5 for this.
.wrapper {
background: black;
}
.overlay {
opacity: .5;
}
.logo {
position: absolute;
top: 0px;
translate: -50%, -50%;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6e8f6ea">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6 d-flex justify-content-center flex-column">
<h3>Title here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu tortor eget sem elementum malesuada. Sed ac arcu nec magna facilisis aliquet. Sed ac pellentesque tortor. Quisque consequat dolor non iaculis molestie.</p>
</div>
<div class="col-6 wrapper">
<img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg" width="800px" height="575px" class="overlay object-fit-cover">
<img src="https://www.bluecapcoffee.com/wp-content/uploads/2023/06/Lavazza.png" class="logo" width="150px" height:"150px">
</div>
</div>
</div>