bootstrap overlap img over row

[Historical Forums User]

I’m trying to have overlap an image with the content below. I need the image to be centered.

Here is a picture of what i’m trying to do:
http://aaronhaas.com/bc/example.png

<div class="container-wrap black-bg what-in-a-name">
  <div class="container">
    <div class="row">

      <div class="center-block">
        <img class="img-responsive " src="">
      </div>

      <div class="col-md-10 col-md-offset-1 story">
        <h4 class="yellow">Lorem ipsum dolor</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div><!-- close col -->
    </div><!-- close row -->
  </div><!-- close container -->
</div><!-- close container wrap -->

.what-in-a-name img{
    position:absolute;
    z-index: 999;
    margin-top: -200px; 
}

.what-in-a-name .story{
    background-color: #803030;
    padding:200px;
    padding-top: 500px;
}

[Historical Forums User]

I’m still having problems figuring out how to center an image that is using absolute positioning where it can still be responsive and center as the screen changes sizes.

here is a link to a live demo:
http://aaronhaas.com/bc/our-brewery-post.html

[Author]

Posts