CSS background-position animation not working

1.2k Views Asked by Shark Coding At 20 October 2024 at 05:38

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:

Original Q&A

There are 1 best solutions below

Temani Afif On 28 November 2020 at 22:12 BEST ANSWER

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 */
}

CSS background-position animation not working

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BACKGROUND-POSITION

Related Questions in BACKGROUND-SIZE

Trending Questions

Popular # Hahtags

Popular Questions