Tag: Ultimatum

Here’s a blog post from the Ultimatum theme developers about using parallax layers in Ultimatum. I was curious if we could use parallax backgrounds within a page/post and asked the dev’s this question. After getting an answer on my question I continued the discussion with their support via private messaging. Here’s the technique that came from this discussion.

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.