title: 3D effect with image as a background of another image
body: <p>I'm trying to add a 3D effect to an image, the final result should look
  like the following: (illustrated in Photoshop)</p>
  
  <p><img src="https://i.stack.imgur.com/Z6ivo.png" alt="the result i&#39;m looking for"></p>
  
  <p>I've tried playing with the css3 property <code>box-shadow</code>
  but it doesn't provide a real 3D effect, as you can see in the following image:
  (I know I can set blur to 0 and change sides, but as you can see - there's a difference in the <strong>corners</strong> between what I'm trying to achieve to the <code>box-shadow</code> result)</p>
  
  <p><img src="https://i.stack.imgur.com/lN07b.png" alt="the box-shadow result"></p>
  
  <p>After not finding a only-CSS solution - I've created the following image and set it as a background of the image itself.</p>
  
  <p><img src="https://i.stack.imgur.com/maCfa.png" alt="the frame - image&#39;s background"></p>
  
  <p><strong><a href="http://jsfiddle.net/V47Ja/" rel="nofollow noreferrer">JSFIDDLE</a></strong>
  * Please notice - I'm using the bootstrap framework.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="" class="img-responsive framed"&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.framed{
  background-image: url('URL-OF-THE-FRAME');
  padding-left: 5px; //The thickness of the "line"
  padding-bottom: 5px; //The thickness of the "line"
  background-size: cover;
  }
  
  .img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
  }
  </code></pre>
  
  <p>Which gives the result I was looking for - but,
  if you re-size the window (try enlarging the result's window in the jsfiddle)
  a distance between the image and the frame is being created.</p>
  
  <p><img src="https://i.stack.imgur.com/B2r0o.png" alt="on resize - a distance is being created"></p>
  
  <p>Should I try another tactic or am I missing here something?</p>