title: How to create a logo image that spans 3 vertical div elements
body: <p><a href="https://i.stack.imgur.com/dMV2M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dMV2M.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <ol>
  <li><p>Using CSS style <strong>position: absolute</strong> and <strong>topY</strong>/<strong>offset</strong> - does not work because logo image(yellow) change its position..<strong>gray</strong> div goes under the <strong>pink</strong> div as a result the logo image overlaps the <strong>gray's</strong> div text content</p>
  </li>
  <li><p>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</p>
  </li>
  </ol>
  <p><strong>NOTE</strong>: when the page gets minimized, the <strong>gray</strong> div goes under the <strong>pink</strong> div, and the <strong>green</strong> div goes under the <strong>gray</strong> 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 <strong>pink</strong> div</p>