background animation
Been trying to figure out how to create an infinite background animation that scrolls from right to left across the viewport in an infinite loop. So far, none of the tutorials that I have tried seem to work, so I thought I would post here and maybe someone else can notice something about my markup or css that explains my lack of results. Here is what I currently have:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1920px;"/>
<link href="background.style.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="scrolling-background"></div>
</body>
</html>
html {
.container {
overflow: hidden;
}
.scrolling-background {
background: url(scrolling_background.png) repeat-x;
width: 100%; height: 100%; overflow: hidden; position: absolute; background-size: cover; transform: translateX(100%);
animation: 60s linear infinite reverse slide;
} @keyframes slide { from { transform: translateX(0%); }
to { transform: translateX(100%); } }
}
width: 100%; height: 100%; overflow: hidden; position: absolute; background-size: cover; transform: translateX(100%);
animation: 60s linear infinite reverse slide;
} @keyframes slide { from { transform: translateX(0%); }
to { transform: translateX(100%); } }
}
6 Replies
what kind of image is it? a pattern or a photo
It's a screenshot in png format.
well in your example you have set the background to cover the whole container, there will be nothing to scroll.
the size of the background needs to be 200% wide, and then you can animate the background-position to -100%
maybe you can share your image?
if you want the whole picture to show and just want to repeat it multiple times while maintaining the cover. you could do something like this
https://codepen.io/MarkBoots/pen/RwOpXbE?editors=1101
Here is the image. It is supposed the bottommost layer in a series of png images that I am trying to use to create a parallax effect. I will try the fix that you suggested and report back.
I wasn't sure what you meant, so I tried 2 things: First, I changed "background-size" to 200%. This made the background disappear. Then, I changed "background-size" back to "cover" and changed "width" to 200%. This also made the background disappear.
Nice solution by Mark