title: CSS - How to place image between 2 section divs?
body: <p>how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:</p>
  
  <ol>
  <li><p>Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div</p></li>
  <li><p>Have consistency on all screen sizes/browsers for the above goal</p></li>
  </ol>
  
  <p>Here's an example to illustrate what I mean:
  <a href="https://i.stack.imgur.com/6Sh1E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Sh1E.png" alt="place image between divs"></a></p>
  
  <p>From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes</p>
  
  <p>thanks a lot for the help, it means a lot</p>