[Leonhard NParticipant]

Hey guys,

I have a problem with the resizing of the background image when using a parallax effect and can not figure out how to solve this. When I activate the parallax option, the background image will be zoomed in significantly, even when it is 3000px wide!

Will post the links to the site in a second private post.

Cheers,
Leo

[Leonhard NParticipant]

This reply has been marked as private.

[SupportMember]

Hi Leonhard,

Please try to re-upload you image but with an image size width of 1000px max, it might not only fix that, but also will help you page to load way faster.

Hope this help.

Thank you.

[Leonhard NParticipant]

Hey,

I have tried different sizes (currently 960 x 400) and unfortunately it looks exactly the same!

Any other idea what is going wrong?

Thanks

[RubinKeymaster]

Hi Leonhard,

this is perfectly normal. You would have to use 1200px to display the whole image on max screen resolution but due the fact that every device has a different screen resolution the script is changing the viewport and therefore zooming in our out to fill the whole screen. There is no “fix” for this because it’s no bug the only way to achieve a photo that is close to what you want is playing around with the width and height of the background image.

[Jayme JParticipant]

It seems like this is a question that gets asked quite often- I’ve seen a ton of other questions on this… why isn’t there a specific dimension you can tell us to use? Or if someone has figured out this dimension, please share with the group so future customers don’t struggle with this…

[ChristianModerator]

Hey Jayme,

There is no specific dimension as every project varies in design. I recommend that you give an allowance of let us say 50px around your image so that if it zooms or not, the part you want displayed would still be visible. That is because as stated above, due to the fact that every device has a different screen resolution the script is changing the viewport and therefore zooming in our out to fill the whole screen. There is no “fix” for this because it’s no bug.

Hope that helps. 🙂

[James BParticipant]

Jayme:

I had the same problem and was also wondering why this question was asked so often without a consistent solution.

Here’s how I (or rather my smarter son with his fancy-schmancy design school degree) was able to resolve it :

1. Reproportion your background image as vertical or square format (1200 X 1200 is probably OK) to be sure that the parallax effect doesn’t run out of image top or bottom as you scroll

2. Add the following CSS to the inline styling option in the Visual Composer’s edit window for the image:

background-size: cover;

I believe this code assures that the background image scales proportionally to fit the container.
I can see that it’s not a bug— just the nature of the parallax effect.
Interested to see if this works for others.

[RadModerator]

Hi James,

Thank you for the suggestion!

And yes, image should be big enough to cover the entire content band and it is a requirement. But because content band has ever changing height, we can’t recommend specific image size. So we could only advice is to use a large enough image prior to their content band’s height.

About background-size: cover;, yes it will work most of the time for most browser, but not on iPad as we tried. We couldn’t give final solution as we’re still trying to find a permanent fix for this. And temporary fix may only works depending on user setup or current rendering.

And great you have it working! 🙂

And this is the known fix, at least for most browser.

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center; 

Thank you.

[aweirickParticipant]

Thanks that fix worked for my query as well!

[Rue NelModerator]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts