Overlap image onto another section while pushing content out of the way

Question

Current: http://jsfiddle.net/nmd1abot/

Desired: https://i.sstatic.net/RP5z7.jpg

Basic structure

Section
    Header
    Body
    Graphic
Section
    Header
    Body

I need help getting the graphic to overlap into the grey section while pushing the header of the second section down more.

Is there a solution that doesn't involve manually setting the padding of the second section?

It is likely that many other pages that I build will use this design, but the image size is not standardized.

Answer 1

http://jsfiddle.net/nmd1abot/2/

Simply add

margin-top: -50px; 
padding-top: 50px;

to your .two

So basically a negative margin-top will push .two up, but also it's inner content.
Than to pull back the content down the same amount of top-padding will do the job.