Обновление 3

Привет, ребята, я обновилкод (http://codepen.io/anon/pen/VYRJLp) и теперь края выглядят как эффект рваной бумаги. Кстати, он использует SVG.

Единственная проблема в том, что я не знаю, как сделать изображение в качестве фона svg ОДНОВРЕМЕННО, чтобы поддерживать рваные края, похожие на бумагу

Пожалуйста, посмотрите. Любые усилия приветствуются.

Обновление 2

Кажется, что невозможно достичь этого эффекта без помощи PhotoShop (PS), поэтому я хотел бы добавить PS как часть решения.

Я не эксперт по PS, но, подумав немного, я думаю, что мне нужно сделать несколько шагов:

Используйте PS, чтобы создать «оболочку» из рваной бумаги, скажем, это shell.png Он должен иметь только цвет по краям, а цвет должен быть белым; внутренняя область прозрачна, так что мы можем поместить изображение в нее.Поместите shell.png поверх изображения, скажем, banner.jpg, что означает установить z-индекс элемента div, который использует shell в качестве фонового изображения, на 1.Используйте другой div, чтобы содержать banner.jpg и установите z-index под div оболочки.

Вопросы для этого подхода:

Это отзывчиво?

Если нет, возможно ли сделать его отзывчивым? Как я должен заставить его работать должным образом на мобильных устройствах.

Я помню, что я видел красиво оформленный веб-сайт, на заднем плане есть картинка, и края этой картинки выглядят как эффект рваной бумаги, и это просто фантастика!

Я искал подобные вопросы здесь, но оказалось, что эффекты в ответах примитивны, которые представляют собой очень простые неровные черные линии.

Что я хочу:

Я хочу, чтобы эта картинка была такой же широкой, как экран устройства, что означает отзывчивость.Края этой картины выглядят как рваная бумага.Я размещу это изображение в качестве баннера после верхней панели навигации, но до содержимого.

Это должно выглядеть как белая область на этой картинке. Но в моем случае мне нужно будет заполнить мою фотографию, чтобы заменить белую область.

Вот мой код: Обратите внимание: в этом коде CSS использует изображение в качестве края, НО, который я не хочу. Я просто хочу, чтобы края были чистыми CSS-эффектами. (Это возможно?) Так что это будет выглядеть так (тот, что справа, вы можете видеть, что нет белых неровных краев)

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

Обновить

Привет, ребята,

Я думаю, что нашел что-то очень похожее на то, что я себе представляю. Вот эффект, который я хочу: