Actualización 3

Hola chicos, actualicé elcódigo (http://codepen.io/anon/pen/VYRJLp) y ahora los bordes se parecen mucho al efecto de papel rasgado. Utiliza SVG por cierto.

El único problema es que no sé cómo hacer que la imagen como fondo de la svg AL MISMO TIEMPO mantenga los bordes de papel rasgado.

Por favor échale un vistazo. Cualquier esfuerzo es apreciado.

Actualización 2

Parece que es imposible lograr este efecto sin la ayuda de PhotoShop (PS), por lo que me gustaría agregar PS como parte de la solución.

No soy un experto en PS, pero por un pensamiento rápido, creo que hay algunos pasos que debo hacer:

Use PS para crear un "caparazón" de papel rasgado, digamos que es shell.png Solo debería tener color en sus bordes y el color debería ser blanco; el área interna es transparente, de modo que podemos colocar la imagen en ella.Coloque shell.png en la parte superior de la imagen, digamos banner.jpg, lo que significa establecer el índice z del div que usa shell como imagen de fondo en 1.Use otro div para contener el banner.jpg y configure el índice z debajo del div de shell.

Preguntas para este enfoque:

¿Es receptivo?

Si no, ¿es posible hacerlo receptivo? Como tengo que hacer que funcione correctamente en dispositivos móviles.

Recuerdo que vi un sitio web bellamente diseñado, hay una imagen en el fondo y los bordes de esta imagen parecen efectos de papel rasgado, ¡lo cual es fantástico!

Busqué las preguntas similares aquí, pero resulta que los efectos en las respuestas son primitivos, que son líneas negras muy simples y rugosas.

Lo que quiero:

Quiero que esta imagen sea tan ancha como la pantalla del dispositivo, lo que significa que responde.Los bordes de esta imagen parecen papel rasgado.Colocaré esta imagen como un banner después de la barra de navegación superior pero antes del contenido.

Debería verse como el área blanca en esta imagen. Pero en mi caso, necesitaré completar mi imagen para reemplazar el área blanca.

Aquí está mi código: Aviso: en este código, el CSS utiliza una imagen como el borde, PERO eso no es lo que quiero. Solo quiero que los bordes sean efectos CSS puros. (¿Es esto posible?) Entonces se verá así (el que está en el lado derecho, puede ver que no hay bordes blancos y rugosos)

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

Actualizar

Hola chicos,

Creo que encontré algo bastante similar a lo que imagino. Aquí está el efecto que quiero: