HTML 5 / CSS animation - Scrolling tiled background image

Question

I have seen some examples of tween animation in html, but cannot seem to find a clear answer that fits my exact need.

I am trying to make a div of a certain width that takes up 100% webpage height. This div should have a tiled background image on it.

Here is the tricky part -- I want the tiled images to scroll vertically at a settable speed within the div.

Is there a simple solution to this?

Questions seeking code help must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Oct 13 '15 at 11:27
Not the best question, but [here is an example anyway](https://jsbin.com/zidecob/edit?html,css,output). — misterManSam, Oct 13 '15 at 11:30
How would you improve this question. The linked webpage seems to apply more to a problem in need of a solution not identifying algorithms or design methods — RWilco8, Oct 13 '15 at 11:41
@Exitcode0 Actually, identifying algorithms or design methods is not what StackOverflow is for. It's purely a problem-solving website. — Praxis Ashelin, Oct 13 '15 at 11:54

Praxis Ashelin · Accepted Answer · 2015-10-13T11:57:51.803

2

You can do this by animating the background-position property.

body{
    background: url("https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat;
    -webkit-animation: scrolling 5s linear infinite;
    -moz-animation: scrolling 5s linear infinite;
    -o-animation: scrolling 5s linear infinite;
    animation: scrolling 5s linear infinite;
}

@-webkit-keyframes scrolling {
  from{
      background-position: 0 0;
  }
  to{
      background-position: 0 105%;
  }
}

edited Oct 13 '15 at 11:57

answered Oct 13 '15 at 11:30

Praxis Ashelin

5,137
2
20
46

[No need for those prefixes](http://caniuse.com/#feat=css-animation). The only prefix that *might* be needed is `-webkit-`. – misterManSam Oct 13 '15 at 11:33
This only seems to work in Chrome and not in IE or Firefox. Also, there is a slight jump when it restarts – RWilco8 Oct 13 '15 at 11:43
@Exitcode0 Take a look at these 3 questions: [1](http://stackoverflow.com/questions/20095686/jquery-animate-background-position-not-working-in-ie) [2](http://stackoverflow.com/questions/10449474/animate-background-position-y-in-firefox-with-jquery) [3](http://stackoverflow.com/questions/12340130/jquery-animate-background-image-on-y-axis). You should be able to solve the rest of your issues now by searching a bit. – Praxis Ashelin Oct 13 '15 at 11:53
Yes, thank you. I found a better example http://jsfiddle.net/chriscoyier/Hyg3C/20/ – RWilco8 Oct 13 '15 at 11:57
@Exitcode0 Do you understand the example, or are you just blindly copying the code? – Praxis Ashelin Oct 13 '15 at 11:59
@Exitcode0 What poor design? Also, I'm asking because the example you linked is not really "better". It's using the same principle, but with a lot more unnecessary code. StackOverflow is not really fond of people that just come here, ask for "gimme the code plz" and copy everything blindly without knowing what it does. We rather help you learn how it works. So that next time you can think of the solution yourself instead of having to ask again. – Praxis Ashelin Oct 13 '15 at 12:06
@Exitcode0 Not trying to shame you, more trying to discourage you from randomly copy-pasting code. Learning to understand new things will give a better outcome for both parties involved. I fixed the animation skip by playing around with the animation values (105% now instead of 100%). – Praxis Ashelin Oct 13 '15 at 12:17

HTML 5 / CSS animation - Scrolling tiled background image

1 Answers1