Est-il possible de faire un effet papier déchiré sur les bords d'une image

Mise à jour 3

Salut les gars, j'ai mis à jour le code (http://codepen.io/anon/pen/VYRJLp) et maintenant les bords ont l'air vraiment comme effet papier déchiré. Il utilise le format SVG.

Le Seul problème est que je ne sais pas comment faire de l'image comme arrière-plan du svg DANS LE MÊME TEMPS, à maintenir l'déchiré-papier-comme les bords.

Veuillez jeter un oeil. Tous les efforts sont appréciés.

---

Mise à jour 2

Il semble qu'il est impossible de parvenir à cet effet, sans l'aide de PhotoShop(PS), donc je voudrais ajouter PS comme une partie de la solution.

Je ne suis pas un PS expert, mais à partir d'une pensée rapide, je pense qu'il ya quelques étapes que je dois faire:

• Utiliser le PS pour créer un papier déchiré "shell", disons que c'est une coquille.png Il
  ne devrait avoir de la couleur sur ses bords et la couleur doit être blanche;
  la zone intérieure est transparent, de sorte que nous pouvons placer l'image dans
  c'.
• Place shell.png en haut de l'image, disons banner.jpg qui
  moyens mis le z-index de la div qui utilise le shell comme arrière-plan
  image 1.
• Utiliser un autre div pour contenir la banner.jpg et de définir le z-index ci-dessous
  la coquille div.

Questions pour cette approche:

• Est-il sensible?
• Si non, est-il possible de le rendre réceptif? Comme je l'ai eu à la faire
  fonctionne correctement sur les appareils mobiles.

---

Je me souviens que j'ai vu un magnifique site web, il y a une image dans le fond et les bords de cette apparence de l'image comme effet papier déchiré qui est fantastique!!!!

J'ai cherché sur des questions similaires ici, mais il s'avère que les effets dans les réponses sont primitives, qui sont très simples, robustes lignes noires.

Ce que je veux:

1. Je veux que cette image soit aussi large que l'écran de l'appareil qui signifie
   réactive.
2. Les bords de cette apparence de l'image comme papier déchiré.
3. Je vais placer cette image comme une bannière après la barre de Navigation Supérieure
   mais avant le contenu.

Il devrait ressembler à la zone en blanc dans cette image. Mais dans mon cas, j'ai besoin de remplir mon image, afin de remplacer la zone blanche.

Voici mon code:
Avis: dans ce code, le css utilise une image comme le bord, MAIS ce n'est pas ce que je veux. Je veux juste les bords pour être pur CSS effets.(Est-ce possible?) Donc, il va ressembler à celui-ci(l'un sur le côté droit, vous pouvez voir qu'il n'y a pas de blanc robuste bords)

<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://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;
}

---

Mise à jour

Salut les gars,

Je crois que j'ai trouvé quelque chose de très similaire à ce que je suis imaginer.
Ici est l'effet que je veux :

OriginalL'auteur Franva | 2015-03-30