CSS way of looping a background image with cover or contain sizing

Question

Say you are trying to animate a tilable background like this:

.container {    width: 160px;    height: 91px;  }  .bg {    width: 100%;    height: 100%;    background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;    background-size: contain;    -webkit-animation: displace 2s linear infinite;    animation: displace 2s linear infinite;  }  @-webkit-keyframes displace {    from {      background-position: 0 center;    }    to {      background-position: 160px center;    }  }  @keyframes displace {    from {      background-position: 0 center;    }    to {      background-position: 160px center;    }  }

<div class="container">    <textarea class="bg"></textarea>  </div>

As soon as you change the dimensions of the container, the looping animation breaks!

Is there any way to make this responsive without JS?

Answer 1

The problem is that, to make it responsive, you need to set the animated background-position using percentages.

But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won't move it).

The only way that I have found to manage this is moving the image to a pseudo element, and moving it. To keep the continuity, though, we will need two pseudo elements.

But that won't work on a textarea.

You didn't said anything about textarea being a requirement, so I am posting this. To show that it works on resize, hover it.

.container {    width: 160px;    height: 100px;    position: relative;    border: solid 1px black;    display: inline-block;  }  .container:nth-child(2) {     width: 220px;    }  .bg {      position: absolute;      width: 100%;      height: 100%;      overflow: hidden;  }    .bg:before, .bg:after {      content: "";      position: absolute;      width: 100%;      height: 100%;      background-image: url(http://i.stack.imgur.com/wBHey.png);      background-size: 100%;      animation: move 2s infinite linear;  }    .bg:before {      right: 100%;  }    @keyframes move {      from {transform: translateX(  0%);}        to {transform: translateX(100%);}  }

<div class="container">    <div class="bg"></div>  </div>  <div class="container">    <div class="bg"></div>  </div>

Answer 2

I was able to make it work by making the background twice as big.

I know this isn't the perfect solution, but maybe you can do a trick with the image size or something to make it look the way you wanted it to.

    .container {width: 160px;height: 91px;}      .bg {        width: 100%;        height: 100%;        background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;        background-size: 200%;        -webkit-animation: displace 2s linear infinite;        animation: displace 2s linear infinite;      }      @-webkit-keyframes displace {        from { background-position: left center;        } to { background-position: 200% center; }      }      @keyframes displace {        from { background-position: left center;        } to { background-position: 200% center; }      }

<div class="container"><textarea class="bg"></textarea></div>