What's going on here

Bootstrap Studio Help
1

Hi everyone.
Some help, please. Why does this happen?
I’m using the hero parallax component and when I add a background color to the section, it’s fine in the editor but not in the preview.
Full CSS property names are being used; background-color and background-image.
Why would the background color show up behind the mage in the editor, as expected but it seems to be on top of the image in the preview.
Have I found a bug?
Is there a reward!? :rofl:
or is it something really obvious?

image
image1259×918 166 KB

image
image1366×620 14.8 KB

2

Difficult to tell without seeing your code. I would think that the .hero style would overwrite any inline styles.

You could try adding !important to the inline style or maybe changing the inline style from:

element.style {
  height: 600px;
  background-image: url(yourbackgroundimageurl.jpg);
  background-position: center;
  background-size: cover;
}

To

element.style {
  height: 600px;
  background: #050210 url(yourbackgroundimageurl.jpg);
  background-position: center;
  background-size: cover;
}

Also do you have your hero class on the section or the parallax div? (I’m guessing the section)
Update: Yes its on the section - I just saw on your screenshot :slight_smile:

3

Thank you :slight_smile: I’ll have a play around with your code later, and see if that helps.
much appreciated

4

another way to do it, and probably the easiest is to add z-index: 1 to the Parallax Background Div

image
image1309×125 11 KB

5

Are you sure the problem isn’t that the image is missing, and you’re only seeing the background color?

With Bootstrap 5, the parallax component uses JavaScript, and it references the CSS from the inline style. If you change the contents of the parallax component using using traditional classes/rules in an external stylesheet, the component won’t function correctly. You’ll see the changes correctly in the BSS editor, but not in the browsers. You have to make all your style changes to the parallax component inline.

6

@printninja

You can use classes instead of inline style if you want

7

Forgive my cluelessness… you basically created a new parallax component using divs and standard Bootstrap classes, bypassing the need for JS?

1 Like
8

@printninja
I changed the javascript in the hero parallax component to use classes instead of inline styles.
Now I only need to add the class parallax to a div and the script make the parallax effect. It works in both the BSS HTML window and in the browsers

1 Like
9

It seems like this is how it should have been coded in the first place, as inline styles are generally frowned upon in web design.

Will your modified JS file also work with the regular Bootstrap Studio Parallax component? I much prefer your method over doing everything with inline styles.

10

I think that if you had inline styles for every element, then that would be frowned upon, but for something like a parallax where (hopefully) there would only be a few on a page, it won’t be a problem. Really it isn’t a problem anyway, it just makes the html a bit messy.

Personally, I set a class for the parallax and only have the background-image inline, something like:

image
image1357×247 16.1 KB

11

Hi @kuligaposten is there any chance you can share the bssdesign file (or just the unminified js)?

I have an idea for a parallax component, and this seems a good place to start

Thanks

Richard

12

I agree, and I do it that way now as well. I just prefer having all my CSS in a stylesheet.

1 Like
13

This may help you
https://beautifier.io/

1 Like