I’m not sure if this is a BSS bug, or something strange about how the AOS library behaves with Bootstrap 5, but here’s the problem.
In Bootstrap 4, if you add a Parallax Background component, the CSS is initially inline. You can extract the rules to a stylesheet, give it a class name and add the class back to the Div containing the Parallax Background, and it works fine. Then you can change the image easily by clicking on the CSS rule in the Styles palette.
If you do the same thing in Bootstrap 5, the CSS will extract fine, but once extracted the background image will no longer show up when you view the site in a browser. You will see it in the BSS workspace, but it doesn’t work on a live site or in preview.
HOWEVER, if you add just the background-image rule to the Div as an inline style, then it shows up fine. So you are forced to use an inline style to use the Parallax Background component in a Bootstrap 5 site.
In Bootstrap 5 the parallax component is running by javascript, so when you extract the inline style the javascript doesn’t find your image. You can easily make a parallax using css if you prefer that.
I would imagine you could also edit the javascript to the correct location too? Guessing since i don’t do javascript, but I’ve done that via jQuery many times which I would assume would be similar
BSS have some components that get initialized with javascript parallax bg is one of them the chart is another. If you inspect the page and see a bs-init.js file,
Take a look at the source code of the bs-init.js then you will discover what happens when the page loads.
The parallax component first create a div with some attributes and then is using the Window.requestAnimationFrame() to create the parallax effect when one scroll.
I very quickly realised the same thing when I exported the latest version of a website for a customer, who I hadn’t touched his website for about 3 builds. All his JS didn’t work. Found a new .js in the exports assets folder, that wasn’t on his ftp site. Now it’s bs-init.js. Uploaded that to his website, bingo! Winner winner.
I presume the reference is somewhere in the bootstrap.min.js?