An image on two Ivs

Question

I am currently dealing with a project and using Bootstrap v3.2.0 as the main tool. My layout follows the single page line, and each topic is approached as a window to the user, with all available space taken advantage of.

I need to make a structure that in only one window I have the following structure:

Where the image overlaps the color 1 and 2, but if the height varies, do not change the color 3.

The code can be found here on JS Fiddle or just look at the structure below.

HTML:
<div id="institucional" class="wrapper clearfix">
    <div class="pink text-center">
        <h1 class="title-institucional">Lorem ipsum dolor <span><img src="http://placehold.it/70x100/" alt=""></span></h1>
        <img src="http://placehold.it/866x407/" alt="" class="img-responsive">
    </div>
    <div class="image"></div>
    <div class="container-fluid grey">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-1 col-md-3">
                    <img src="http://placehold.it/183x159/" alt="" class="center-block">
                </div>
                <div class="col-md-7">
                    <article class="text-institucional text-justify">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloribus nemo, minima quae unde quaerat alias eum deleniti sed. Dolorum excepturi at nisi dignissimos sunt reprehenderit eos fugiat expedita nam.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis officia quam quae dignissimos illum dolore odio itaque consequuntur fuga! Illo ipsa eaque similique in iure expedita dolorem dolorum et laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum totam accusantium, necessitatibus placeat quisquam assumenda, adipisci ducimus sunt doloribus beatae! Officiis ad eius, atque saepe facilis. Voluptates magni illo aspernatur?</p>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>

And this page as stylization, in addition to the properties of bootstrap:

CSS:
#institucional { background: #fff; position: relative; }

.wrapper { width: 100%; min-height: 100%; height: 100%; display: table; }

.pink { min-height: 32%; max-height: 32%; height: 100%; background: #e1dcff; padding: 30px 0 0; }
.image { min-height: 28%; max-height: 28%; background: #fff; clear: both; }
.grey { height: auto; background: #f5f5f5; clear: both; padding: 30px 0; }

.title-institucional { color: #000; }
.text-institucional { font-size: 15px; font-weight: 400; line-height: 1.5; }

Answer 1

I don’t know if this is exactly your need, but I did in this fiddle here a layout with the image in the center and that fits the size, not invading the other element.

I put the element as position: relative and with a top : 100px, but then you adjust according to your need.