Image overlap two divs (vertically)

Question

I have a website that I'm creating and I would like to overlay an image vertically over two separate divs. I am really struggling on the best way to go about this.

Here is my current code:

HTML

<div class="top-div">Some text</div>
<div class="bottom-div">Some text</div>
<img src="thisimage.jpg" alt="overlap top and bottom div" height="280" width="100" />

The top and bottom div both have a min-height of 280px.

Answer 1

Another way of doing this is to put your divs and image into a seperate container, and then play around with position relative and absolute.

Fiddle: https://jsfiddle.net/ewpgovvs/

Code:

div {
  border: 2px solid red;
}
.wrapper {
  position:relative;
}
img {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

<div class="wrapper">
  <div class="top-div">Some  text text text text text text text text text text text text text text text t text text text text text text text text text text text textext text text text text text text text text text text text</div>
  <div class="bottom-div">Some text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <img src="http://pngimg.com/upload/cat_PNG1631.png" alt="overlap top and bottom div" />
</div>