CSS background-position animation not working
Question
I have a background image that I want to continuously scroll from right to left. I want the image to cover the entire screen, but when I set background-size: cover; it does not animate at all. How can I fix this?
HTML
<body>
...
</body>
CSS
body {
background-color: rgb(15, 5, 40);
background-image: url('./images/star background.png');
background-repeat: repeat;
background-position: top left;
background-size: cover;
animation: myMove 3s linear infinite;
}
@keyframes myMove {
from { background-position-x: right; }
to { background-position-x: left }
}
If I set background-size #px #px; or initial or X% Y% then it works fine, but doesn't cover the whole screen? Also, here is the image:
1 answers
solution1
1 ACCPTED 2020-11-28 22:12:17
Here is another idea using translate on pseudo element where you make the element big to have enough room for an infinite movement:
html::before { content:""; position:fixed; top:0; left:0; /* change to right for the opposite direction */ bottom:0; width:200%; background:url(https://i.stack.imgur.com/wJKLc.png) 0/50% auto; animation:move 2s linear infinite; } @keyframes move { to {transform:translateX(-50%);} /* change to "50%" for the opposite direction */ }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.