title: Image overlapping BG image and/or DIVs
body: <p>I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.</p>
  
  <p>Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!  </p>
  
  <p><a href="https://i.stack.imgur.com/JsdHI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JsdHI.jpg" alt="I want to replicate the overall structure in this image... "></a></p>