Adding a parallax image

Support
#1

Hi there,

I’d like to add parallax images to my posts/pages, but I cannot find a section within Cornerstone/WPBakery Page Builder that allows parallax images?

However, I found this thread which describes how to add parallax images:

But I cannot find the module/element that they are describing in the thread above?
I tried using the normal “Image” element but it didn’t give me the functionalities as described in the thread.

Could you please advise me on how I can add parallax images to posts/pages?

Many thanks

#2

Hi There,

Parallax work on background images.

You can add background images to your sections, rows or columns.

To do that on Cornerstone, click, for example on the section, and select advanced on the background options, you will be able to assign an image as a lower or upper layer and turn on parallax. Paerallax is more visible with zoom abo 130% on the settings.

Hope it helps

#3

Hi Joao,

Many thanks.

  1. That worked in the backend, but when I view the page in the frontend, the image isn’t there/doesn’t appear?
    http://jeypolitan.com/about/

  2. The other issue is that it crops the image to the page horizontally. How can I get the parallax image/background to be full width, same as in the attached forum thread above?

  3. On this test page, you can see that the images get very cropped/narrow vertically? It only shows a fraction of the image, and it doesn’t appear as it does in the backend of Cornerstone.

  4. They also appear to go out of the template borders, the shadows around the post?

Same as on the thread above (which was resolved), I’d like the parallax images to look like this: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

Many thanks!

#4

Hey @Jeypolitan,

  1. I checked each section of your about page and none of them has a background image.
    2 and 3. You must increase the section’s padding or add a gap element in your section and adjust the vertical size of the gap element. Please see this screencast.

This screencast shows how to achieve the parallax effect discussed in the other thread.

Hope that helps.

#5

Hi Christian,

Many thanks for your reply! :slight_smile:
I did all of the steps above from your comment, also from the videos.

  1. In your first video example, once an image is selected, it automatically becomes full-width. How? Mine crops to approx. 60% of the width. I’d like mine to be 100% full-width, same as in the video. I’ve adjusted my paddings etc, but nothing works. I’ve added the gap element as well, but it did not make it full width.

  2. In your second video example, it explains how to make the background fixed upon scroll. That worked fine, but now it jumps down once you scroll down a certain amount (which it doesn’t in the video). I’d like mine to work exactly as in the examples, and in the video, but for some reason it starts sticking down?

Please advise.

Many thanks!

#6

Hey There,

Thanks for updating in!

1.) You are using the wrong page template and that is why you only have 60% width. Please edit the page and change the page template using Blank - No Container | Header, Footer. This template will give you a fullwidth section thus having a fullwidth background image. To know more about page templates, please check this out:

2.) Since you have added the css code as shown in the video, you do not need to enable the parallax setting in Cornerstone. I went ahead and change the page template and also set the background with fixed position.

Please check your site now.

#7

Hi RueNel,

Wonderful, thank you for your help :slight_smile:

Last issue, which is about point number 2.
With the fixed CSS code, the page(s) are now very glitchy. Without the CSS code, the pages scroll smoothly. But with the CSS code, the page(s) are glitchy and slow.

You can see the glitch on the about page (very slow once you scroll past):
http://jeypolitan.com/about/

And also on this page where I’ve added a couple (was quick without the CSS but very slow with the CSS):
http://jeypolitan.com/?page_id=884

I really want the parallax images to have a fixed background, but to have a normal scroll (not glitchy), the same as on here https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm.

How can we stop the glitch/slowdown from the CSS?
Please advise.

Many thanks!

#8

Hi,

Not really sure about the glitch, it seems to work well on my end.

See Video - https://www.screencast.com/t/ursZIJ2h

You might want to try this X extension - http://demo.theme.co/smooth-scroll/

Hope that helps.

#9

Hi Paul,

Thanks for your reply.

I have added the Smooth Scroll X extension but it did not help.

Please see my videos of the large glitches:


(^ As you can see from 2 seconds in, once you scroll down to the text, and up again, there are huge delays).

And


(^ As you can also see from this video, there are huge delays/glitches once you get to the text, and scroll up and down. It’s not smooth at all).

The parallax effect seems to be working well on other Theme X sites, but it’s very glitchy on mine.

Please advise.

Many thanks

#10

Hello There,

The slight delay is the result of the section structure in the theme. Compared to the example where is it is using a relative positioning. In the section, the background images were positioned as absolute arranged with z-indexes. This is why it resulted to a different behaviour compared to your example url. If you simply want to have the effect exactly the same as the example url, Cornerstone is not the solution. You must do the same structure in the example url instead.

Hope this explains it briefly.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.