How to create a logo image that spans 3 vertical div elements - html

Question

How to create a layout that allows having a logo image(yellow) that spans 3 vertical div elements and does not change its location(center) when the page gets minimized. I'm using Bootstrap 4. Initially, I have found 2 solutions but they do not work when the page is resized by minimizing its size.
Using CSS style position: absolute and topY/offset - does not work because logo image(yellow) change its position..gray div goes under the pink div as a result the logo image overlaps the gray's div text content
Splitting the logo image horizontally into 3 images, the problem is that between the second(middle) image and the bottom image appears a lot of space when minimizing the page
NOTE: when the page gets minimized, the gray div goes under the pink div, and the green div goes under the gray div, as a result, the second row becomes twice taller. No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div

Answer 1

Place the 3 divs inside a wrapper
<style>
.wrapper{
background-image:url("image.jpg");
background-size:cover;
}
</style>
<div class="wrapper">
// three divs go here
</div>

Answer 2

This is possible through margin: negativevalue 0 -- but without actual code I can't give exact values. If standard Bootstrap 4, adding the class my-n5 (taking advantage of Bootstrap 4's spacing utility) to the logo element will make its box-model overlap others.

Answer 3

You need to use position: absolute, top: 50% and transform: translateY(-50%) to the logo to make it work
First, the position: absolute and top: 50% will make the logo position fixed in it's relative parent and make the top of the logo itself positioned in the center it's parent
Then the transform: translateY(-50%) will move the logo from the current position negatively for half of the logo height
Here's the working example
.c1 {
background: pink;
overflow: visible;
}
.c2 {
background: gray;
}
.c3 {
background: lightblue;
}
.logo {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
1 DIV
</div>
</div>
<div class='row'>
<div class='col-md-4 c1'>
Left Content Logo
<img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
</div>
<div class='col-md-3 c2'>
Mid Content
</div>
<div class='col-md-5 c3'>
Right Content
</div>
</div>
<div class='row'>
<div class='col-md-3' style='background: blue;'>
LEFT
</div>
<div class='col-md-6'>
MID
</div>
<div class='col-md-3'>
RIGHT
</div>
</div>
</div>
Note: You can try to resize either the div or the logo to see that it will still centered in it's relative parent container