3d Effect With Image As A Background Of Another Image

I'm trying to add a 3D effect to an image, the final result should look like the following: (illustrated in Photoshop) I've tried playing with the css3 property box-shadow but it

Solution 1:

You need to use percent padding so it addapts to the size of the image/container when window is resized.

DEMO

CSS :

.framed{
    background-image: url('http://www.6pix.co/images/shadow-3.png');  
    padding-left: 2.9%;  
    padding-bottom: 2.9%;  
    background-size: cover;  
}