user43286 user43286 - 3 months ago 11
CSS Question

CSS background gif image is not looping with repeat

CSS background gif image is not looping with the repeat. I have following code, but it's not working. Both images are rendered top of another, but the gif file is not looping.

<div class="decoration">
<div class="image-holder">
</div>
</div>

.decoration {
display: inline-block;
width: 365px;
height: 650px;
margin-top: -10px;
background: url("../img/outer.png") no-repeat center;
background-size: cover;
vertical-align: top;
background-position: center center;
}

image-holder {
width: 269px;
height: 477px;
margin: 77px 48px;
background: url("../img/pic.gif") repeat center;
background-position: center center;
background-size: cover;
}

Answer

.decoration {
    display: inline-block;
    width: 365px;
    height: 650px;
    margin-top: -10px;
   background: url("https://placeholdit.imgix.net/~text?txtsize=34&txt=365%C3%97650&w=365&h=650") no-repeat center;
    background-size: cover;
    vertical-align: top;
    background-position: center center;
}

.image-holder {
    width: 269px;
    height: 477px;
    margin: 77px 48px;
    background: url("http://bbsimg.ngfiles.com/1/24309000/ngbbs509571c17019a.gif") repeat center;
    background-position: center center;
    
}
  
    
}
<div class="decoration">
    <div class="image-holder">              
    </div>
</div>

I'm using a dummy gif here. Try replacing the gif url with yours.