Dev Tools shows this CSS code:

.hero_section {
height: 450px;
background-size: cover;
position: relative;
z-index: 1;
background-position: 100% 0%;
transition: background-position 9s ease-in-out .2s;
}
When I change background-position to “0;” voila! It moves!

Pasted into Custom CSS, not at all. The CSS change does not make the image animate.

What am I doing wrong here?
Please help!
Thanks, Mari

I found JS errors in both Websites. But the live version has one more when compared to the test version, which is:

“Uncaught TypeError: $ is not a function at westadventures.com/:563”

If we consider that this animation also uses JQuery, then we’ve got two possibilities:

1- For some reason the JQuery library is not properly loaded when this script is running. Maybe because by the time the Website attempts to run the animation the JQuery wasn’t called yet, or maybe because JQuery isn’t being loaded at all.
In both cases, you just have to make sure that JQuery is being loaded before that code section where you setup the animation.

2- There are at least two JQuery versions being loaded, and sometimes this could cause a conflict, which is perfectly workable by using a function called noConflict().

Please check these possibilities and tell me about the result.

The images animate for me in both cases. The difference is the live site image starts centered vertically instead of at the top. It hardly moves. This is because of conflicting position rules. Resolve the applicable rules so the image y position starts at 0 and ends up at 80%.

It may not matter, but I’d advise that the individual background properties be specified individually instead of using the aggregated background: property. Mainly so the background-position: property can surely be matched to the transition property specified. Browsers should work this out anyway, but removing any possible ambiguity seems like a good idea.

Based on your yesterday post, I had a developer look at it and he:

“changed the line in footer.php from

$(‘.hero_section’).bgLoaded();
to
jQuery(‘.hero_section’).bgLoaded();
The jQuery that comes with WordPress doesn’t work with the $. I suspect when the second jQuery library was removed, that bit stopped working.

So, it’s no longer throwing the error, and I see that the hero image now animates.”

So what you are seeing now is based on what he did.

But you’re right it does start mid-frame, which misses the mountains. I like what you say about specifying the “background” and will work on that too.

Thanks so much!

User Andrei adds a strict mode variant of the same about halfway down the notes.

Just FYI. And you’re very welcome!