Logo image overflow into content

Hello I'm currently working on a website where I want the logo of the business to overlap into the content.

Similar to this website: http://ift.tt/1GEYxXc

I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach

Example Code of what i've tried

<div class="container">
    <ul class="nav nav-pills">
        <img src="logo.jpg" style="float: left; z-index: 3;">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Home</a></li>
    </ul>
    <img src="http://ift.tt/1aoFNwR" style="z-index: -1; margin-top: -50px;">
</div>

What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary

Could anyone with experience in doing this point me in the right direction?