How is it possible to add an image border to the left and right of a wrapper?

Question

I'd like to add a border image on the left and right of a wrapper element to give it a ripped paper effect.

I've tried using the before and after pseudo selectors but I couldn't get the image to repeat along the y-axis.

What is the best way to achieve the desired result?

Thanks.

Image example: http://i.imgur.com/9f5Y8bi.png

Edited for clairty: Here is a screenshot of the full site insofar: http://i.imgur.com/IpifJyd.jpg

I'd like to put a ripped image of the current paper texture to the left and right side of the main wrapper, and have it repeat along the y-axis to give the wrapper a ripped paper effect.

Currently, it's just a box-shadow.

Answer 1

If I understand what it is that you're asking, you should be able to achieve the desired effect by adding a wrapper with a background image, like so:

.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>

Answer 2

you can try this and i hope it will work for you.

Demo or 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">