First, following the blog post, create a div and add the class “parallax” to it.
That should look something like this:
<div class="parallax"> ... </div>
NOTE: You don’t need to call it “parallax”. You can call it whatever. You just have to use the same name in the css code. Because you will have to add the calls to the stellar java script as well for the parallax to work. Ultimatum uses Mark Dalgleish’s Stellar Java script.
So your html will loke like this:
<div class="parallax" data-stellar-background-ratio="0.5"> ... </div>
The number on the ratio actually defines how fast the parallax layer will move. At a value of 0.5 the parallax moves at medium speed. If you go higher the parallax will move slower. At a value of 1 the parallax layer is not moving at all. But at a value of 2.0 it will move fast. Besides that you can use all the arguments/calls listed here.
In your CSS script you can talk to the parallax layer like this
.myTopParallax { background-image: url("http://the-path-to-your-background-image.jpg"); background-size: cover; padding-bottom: 40%; }
The most important is to set the background image. Everything else is optional.