Forum Academy Marketplace Showcase Pricing Features

How to accomplish this effect

Check out the header image on this site: http://barleysoftampa.com/

How would I do this… floating groups? reuseable elements? I can’t get the right thing to stay with the rest of content scrolling on top of it. You’ll notice it’s used for every page with a different image.

(I’m not concerned about the shrinking menu bar)

If it’s the floating top bar you’re talking about, yes, it’s a floating group. Like bubble.is right?

No, I’m talking about the big header image. It stays there while the body content scrolls on top of it.

Oh, make the stripe floating, and display an image in it. Double click on the page and add a stripe.

Set Parallax effect in the background image

1 Like

Thank you both.

1 Like

How did you make the image push up out of the way ?

I added a stripe and made it an image (a very tall stripe) like Emmanuel suggested. The only thing I couldn’t get exactly the same is having the entire body content cover the full width of the image because Bubble is not responsive yet in that way. So, my page is set to the fixed “full width”, but since the stripe goes past the fixed width, it’s still peeking out on the sides.

Check it out: https://tarantula_billiards.bubbleapps.io/index

It’s ok for now. My main thing was getting the image to stay fixed.

1 Like