Parallax section image size

Support
#1

I have a weird issue - when you first get to one of my pages that simply has an image set to parallax it looks correct. But if you wait a few seconds or scroll, the image suddenly gets really big, the incorrect size. What’s up with that? Here’s a sample url, the image of the flowers at the top, starts correct, then the image blows up too big:

http://parlor11.com/contact/

#2

Hey,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

#4

It was easy in the old forum but I can’t figure out how to set as private reply - where is that option?

#5

Hi again,

You can stop the image jumping effect by adding the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
    background-position: 50% 50% !important;
}

Hope this helps!

#6

That worked, but I liked the size of the image before it would do that jumping, now it just stays at the larger size, and my images were created for the original smaller size before the image would jump/zoom.

#7

Hi again,

The above code only positions the background image at the initial position, it’s not zooming the background image, however you can adjust the background position by changing the second parameter in the above code as per your need, please note that this will apply to all of your parallax images so it would be best if you give that section a unique ID e.g custom-parallax-section and then use the code like this:

#custom-parallax-section.bg-image.parallax {
    background-position: 50% 1% !important;
}

Hope this helps!

Classic Parallax in Pro
#8

This doesn’t effect the zoom, it just keeps the very zoomed in size and adjusts how far vertically it is positioned. It was great until the zoom before we added the code, now it just keeps it at the zoomed size and moves it up or down. How do we get it to display at the smaller size it would start with? That looked great!

#9

Hi there,

The code my colleague suggested is exactly the one which is used at the first flash you see in the parallax image functionality.

But if you want to make sure kindly simply turn off the Parallax functionality and add the code below to the style input of an element:

background-attachment: fixed;

Hope it helps.