Is it possible to make a torn paper effect on edges of a picture

I remember that I saw a beautifully designed website, there is a picture in the background and the edges of this picture look like torn paper effect which is fantastic!

I searched the similar questions here but it turns out that the effects in the answers are primitive, which are very simple rugged black lines.

What I want: 1. I want this picture to be as wide as the device screen which means responsive. 2. the edges of this picture look like torn paper 3. I will place this picture as a banner after the Top Navigation bar but before the content

It should look like the white area in this picture. But in my case, I will need to fill in my picture to replace the white area.

Here is my code: Notice: in this code, the css uses an image as the edge, BUT that is not want I want. I just want the edges be the picture itself.(Is this possible?) So it will look like this one(the one on the right side, you can see that there is no white rugged edges)

<div class="row">
    <div id="letter" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    </div>
</div>

#letter { /*torn paper border*/
    height:450px;
    position:relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:url('img/background.jpg');
    background-size:cover;
    opacity:0.8;
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('http://ift.tt/1EUNiEb') 80 80 80 repeat; 
    -webkit-border-image: url('http://ift.tt/1EUNiEb') 80 80 80 repeat; 
         -o-border-image: url('http://ift.tt/1EUNiEb') 80 80 80 repeat; 
            border-image: url('http://ift.tt/1EUNiEb') 80 80 80 repeat;
}