Parallax Background

Thanks Martin for 2.5.3 and the feature Parallax Background!

I wonder, whether you can help with the following issue I face: When I add the feature to my page, everything looks fine in BS. The image is scaled perfectly. Height is changed to 100vh. However, in the preview the image looks not the same. The image is only partially visible. It is zoomed in to some extend. I tried to adjust the background attributes to auto or contain, but there is no change in the preview.

Any idea, what I made wrong?

Cheers Holger

Sorry for replying so late, I have missed this thread!

The image that is set as a background to the parallax component is set to background-size:contain. What this does, is to zoom the image until it covers the entire parallax container. If your browser window is very wide/tall, this can lead to a very zoomed-in image. A workaround is to make the parallax container more like a square, with similar width to height. Alternatively, you may set a background image with proportions similar to the parallax container, so that more of it is visible.

Hi Martin Angelov. can you please help me do a parallax design in my website? even though I changed the background-size to contain, it is still the same. Thanks in advance.

Parallax bg, as most features people are asking devs to implement, can be done really easy with minimal HTML/CSS/bootstrap knowledge. I did not even know that was added as an internal BSS option, so that's how I simply do it.

1) chose a library you like for the parallax effect. ie. https://cdnjs.com/libraries/jarallax

2) in the design pane/Javascript right click and select Link External JS, and paste https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.7.3/jarallax.min.js

3) inside user.js add a few lines to define the effect you want, mine was:

/* this part for jarallax */
$('.jarallax').jarallax({
    speed: 0.3,
    noAndroid: true
});

sample and instructions were found on https://github.com/nk-o/jarallax

4) my site had a DIV with a class .container and a large background-size: cover; image. All I did in the ATTRIBUTES pane was to add to that div the .jarallax class.

I don't think it should be a goal of BSS to implement tons of simple JS libraries to get banal effects. Website developers should be able to do it on their own when they understand how to link to external css and js, add classes etc.