Image overlapping BG image and/or DIVs

Question

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.

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!

Answer 1

This is a pretty neat effect. This is one way out of multiple you can do. The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.

I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.

Let me know if something like this does the job.

.first-image{
  background: #eee;
  height: 250px;
}
.container{
  width: 95%;
  margin: 0 auto;
  max-width: 400px;
}
.container--padding{
  padding: 1rem 0;
}
.second-image{
  margin: 2rem auto;
}

<header>
  <div class="first-image">
    <div class="container container--padding">
      <h2>I'm the cool title headline.</h2>
      <button>Download</button>
    </div>
    <div class="second-image">
      <div class="container">
        <img src="http://placehold.it/400x190" alt="placeholder" />
      </div>
    </div>
  </div>
</header>