Question

I am trying to use multiple background on a div without any success can any one suggest me where i am getting it wrong , below is the css i am using :

.box-text{
font-size: 14px; color: #ffffff; line-height: 22px;  
background-image:url('/images/p-top.png'), url('/images/p-center.png'),url('/images/p-bottom.png'); 
background-position: top center, center center, bottom center; 
background-repeat: no-repeat, repeat-y,no-repeat;}

<div class="box-text">
variable text.............
</div>

Result i am getting :

Expected result:

I have done slice of the box to get 3 images one is the top one the other middle one for which i have use repeat-y and the third image is the bottom image to cover the box.

Thanks

Answer 1

The background position is specified with the horizontal value first, so you should switch them:

background-position: center top, center center, center bottom;