Image background on Both sides (left and right)? - html

Question

I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically

Answer 1

background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.

Answer 2

im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat

Answer 3

Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y

Answer 4

Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}