I have a bootstrap row of two columns, and in one column need to have a semi opaque background image covering the entire thing with a dark background below it, to create contrast for a logo to be centered within the div.
So I have tried all sorts of ways to do this, but cannot find a way out in a reponsive way.
In the pen below I need the coffee photo covering the entire div as if it was a background image; object fit just isn’t working for me, and I don’t want any overflow beyond the div.
And the logo should be centered within the div overlaying that photo. Using bootstrap 5.
.wrapper {
background: black;
}
.overlay {
opacity: .5;
}
.logo {
position: absolute;
top: 0px;
translate: -50%, -50%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>5
Just follow the Bootstrap Documentation: position:
The container needs the class: position-relative
The logo element needs the classes: position-absolute top-50 start-50 translate-middle
the overlay should also get the class w-100 to not overflow and allow object-fit-cover to work.
.overlay {
opacity: .5;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 position-relative">
<img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg" class="overlay object-fit-cover w-100">
<img src="https://www.bluecapcoffee.com/wp-content/uploads/2023/06/Lavazza.png" class="logo position-absolute top-50 start-50 translate-middle" width="150px" height:"150px">
</div>
</div>
</div>