title: Is it possible to make a torn paper effect on edges of a picture?
body: <p><strong>Update 3</strong></p>
  <p>I updated the <a href="http://codepen.io/anon/pen/VYRJLp" rel="nofollow noreferrer">code</a> (<a href="http://codepen.io/anon/pen/VYRJLp" rel="nofollow noreferrer">http://codepen.io/anon/pen/VYRJLp</a>) and now the edges look really like torn paper effect. It uses SVG by the way.</p>
  <p>The only problem is I don't know how to make the image as the background of the svg AT THE SAME TIME maintain the torn-paper-like edges.</p>
  <p>Please have a look it. Any efforts are appreciated.</p>
  <hr />
  <p><strong>Update 2</strong></p>
  <p>It seems that it is impossible to achieve this effect without the help of PhotoShop(PS), so I would like to add PS as a part of solution.</p>
  <p>I am not a PS expert, but from a quick thought, I think there are a few steps I need to do:</p>
  <ul>
  <li>Use PS to create a torn paper &quot;shell&quot;, let's say it's shell.png It
  should only have color on its edges and the color should be white;
  the inner area is transparent, so that we can place the picture in
  it.</li>
  <li>Place shell.png on top of the picture, let's say banner.jpg, which
  means set the z-index of the div which uses shell as its background
  image to 1.</li>
  <li>Use another div to contain the banner.jpg and set the z-index below
  the shell div.</li>
  </ul>
  <p><strong>Questions for this approach:</strong></p>
  <ul>
  <li><p>Is it responsive?</p>
  </li>
  <li><p>If not, is it possible to make it responsive? As I have to make it
  work properly on mobile devices.</p>
  </li>
  </ul>
  <hr />
  <p>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!</p>
  <p>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.</p>
  <p>What I want:</p>
  <ol>
  <li>I want this picture to be as wide as the device screen which means
  responsive.</li>
  <li>The edges of this picture look like torn paper.</li>
  <li>I will place this picture as a banner after the Top Navigation bar
  but before the content.</li>
  </ol>
  <p>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.</p>
  <p><img src="https://i.stack.imgur.com/EdZqr.jpg" alt="enter image description here" /></p>
  <p>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 to be pure CSS effects.(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)
  <img src="https://i.stack.imgur.com/f6NtR.jpg" alt="enter image description here" /></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div id=&quot;letter&quot; class=&quot;col-lg-12 col-md-12 col-sm-12 col-xs-12&quot;&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  #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://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
      -webkit-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
           -o-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
              border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat;
  }
  </code></pre>
  <hr />
  <p><strong>Update</strong></p>
  <p>I think I found something quite similar to what I am imagine.
  Here is the effect I want:
  <img src="https://i.stack.imgur.com/kbP8H.png" alt="enter image description here" /></p>