Как можно добавить границу изображения слева и справа от обертки?

Question

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

Я пробовал использовать псевдо-селекторы до и после, но я не мог заставить изображение повторять вдоль оси y.

Каков наилучший способ достижения желаемого результата?

Спасибо.

пример

Изображения: http://i.imgur.com/9f5Y8bi.png

Edited для clairty: Вот скриншот всего сайта в части: http://i.imgur.com/IpifJyd.jpg

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

В настоящее время это всего лишь коробка-тень.

Answer 1

вы можете попробовать это и я надеюсь, что это сработает для вас.

Demo или jsfiddle

css-

body{background: url(body/background/image/path);} 
.wrapper{height: 316px;width: 700px;position:relative;background: url(your/background/image/path);margin: 0 auto;border-right:1px solid #333;border-left:1px solid #333;} 
.wrapper:before{background: url(transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;left:-44px;} 
.wrapper:after{background: url(second/transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;right:-44px;} 

HTML: -

<div class="wrapper"> 

Answer 2

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

.wrapper { 
    padding:0 15px; /* Set the left and right to the width of the border you desire */ 
    background: url('path/to/border/image.png') repeat; 
} 

<div class="wrapper"> 
    <img src="/path/to/facing/image.png" /> 
</div>