How to make background image fixed, so that other stuff scrolls over it

Tips
1

Please skip to third message in this string

Robert

2

You should be able to set the background of the page to image via the property editor for the page itself:

1 Like
3

Provided you aren’t trying to set it as a background image (ie only taking up a portion of the page, have you used the send to back / move to front functions? Accessible by clicking on the object and brining up the menu:

4

Thank you for your replies, Dan and Gaby

I found a solution, which I will explain below.

The solutions you kindly proposed were not quite what I was hoping to achieve, and I’ll explain that below too.

How to make a background image fixed, so that other stuff scrolls over it.

If your app is only intended for desktop, the solution is simple.

  1. set the background image for the page, and then set the parallax to 0. (parallax setting is at the bottom of the screen shot)

image.png344×711 28.4 KB

If your app is intended for both desktop and mobile, then its a bit more complicated

Bubble’s parallax effect only works for desktop.

I am pretty sure the only way to get a fixed background image is to write some HTML/CSS. (again, I might be missing something obvious, but I’ve looked around alot)

  1. Put an html block into your page which is arranged behind everything else.
  2. Learn how to use CSS for background images with fixed position (or any other property you want) on w3schools here: https://www.w3schools.com/cssref/pr_background-position.asp
  3. You might want to use different images for different screen sizes or orientations. In that case, you will also need to learn how to use @media. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  4. You’ll have to host your images somewhere. Cloudinary is pretty good. You upload your picture, and then you get a link to use in your html/css. I guess you could use bubble to host the image somehow, but I couldn’t see an easy way to do that.

Then you can put your html/css into your html block, and you’ll be good to go.

Here is an example page with a fixed background:

https://background-images-example.bubbleapps.io/

Here is the public bubble editor for this page:

https://bubble.io/page?name=index&id=background-images-example&tab=tabs-1

You can go in and look at the HTML block to see how the background is achieved, and how you can use different images based on different screen sizes (in this case, it uses a different image when screen size is greater than 750px)

Gaby: Thanks for your suggestion. In your proposed method, I believe the background image gets stretched to accomodate the height of the page. I was hoping to have a fixed height for the background image. In the method I propose above, the height of the image is fixed not matter how long the content is on the page, and the content just scrolls over the fixed-height, fixed-position background image.

Dan: Thanks for your suggestion. Unfortunately, floating groups can not be placed behind anything. So while they can be fixed vertically, they will always cover up any other content on the page.

1 Like
5

Happy to help. Glad you were able to find a workable solution and for documenting your approach. :slight_smile:

1 Like
6

This topic was automatically closed after 70 days. New replies are no longer allowed.