背景重复不适用于绝对位置

Question

An image is used as background image which is absolute positioned it has repeat-x property but not working

 <div>
    <div class="background-image">
    </div>
 </div>


 .background-image{
       position:absolute;
       background-image : url(...);
       background-repeat: repeat-x;
  }

Is there any solution?

Answer 1

you have to set the height of .background-image class and also set the width of container div.

Hopefully this ll helpful

 div { margin: 0 auto; width: 600px; background-color: #ccc; } .background-image { position: absolute; background-image: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle-social_facebook_outline_stroke-128.png); background-repeat: repeat-x; height: 130px; }