title: Insert image between two divs
body: <p>I need to insert photo in between divs (blue and light-blue) as in the following example.</p>
  
  <p><img src="https://i.stack.imgur.com/4FkYU.png" alt="enter image description here"></p>
  
  <p>I did it with absolute positioning:</p>
  
  <p>HTML:</p>
  
  <pre><code>    @*Blue and light-blue sections with photo*@
      &lt;div style="width: 100%; height: 120px; background-color: #0052a4"&gt;&lt;/div&gt;
      &lt;div style="width: 100%; height: 120px; background-color: #c2dffd"&gt;
          &lt;div class="image"&gt;
              &lt;img src="/Content/pictures/MainPhoto.png" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image {
      position: absolute;
      bottom: -100px; /* bottom space */
      right: 100px; /* right space */
  }
  .image img {
      display: block;
  }
  </code></pre>
  
  <p>But this way doesn't work correctly when you change the screen resolution of the device.</p>
  
  <p>I create <a href="http://jsfiddle.net/DTcHh/951/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a> with this example.</p>
  
  <p>Could you please to suggest another way to resolve this problem?
  I need to create responsive design without hardcoded values.</p>
  
  <p>Thanks! :)</p>