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?
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.