Design in bubble, responsive elements in background (position absolute in Webflow)

Hi bubblers !
This is screenshot from my Figma design

I have a trouble with putting those circles and gradients on background…if I try to put them as a images, responsiveness of this page is dead :frowning: Do you have any advice how to put them on background like in Figma design?
King regards

I’ve never tried this, but can you make an image with them with a transparent background then put that image as the background of a group. Then that group can rest on top of the main canvas and adjust as required?

If it works, let me know. I have zero graphical skills.

have you found the solution? if you found, then please tell me too. Right now am working on it.

Another thought. Create a page wide background group as snap to parent. Put the circle where you want and adjust margins to fit them right into position.
Then put another group on top, then your normal elements inside that group.

I’ve done it, works perfectly fine, as long as it’s not crucial exactly where those circles are when the page changes dimensions. You may need some conditions to adjust their margins.

Hey, yes I found a solution, it’s a concept of absolute element in html in bubble it’s called “floating zindex” .You schould add a floating group and make it “float beneath the page” and inside this floating group put elements that you want (make sure that images have proper aspect ratio"

I have some more question please answer.

  1. what’s the layout of the floating group?
  2. how do you got the blue blur in your background?

Thank you,


  1. Layout is on the top of all elements on page
  2. Blur is a png image
1 Like

Thank you so much. Working on it.

Hey! Arsenii, Please answer I tried a lot, but in my case is not working to create even the same design you have.

I mean by asking about layout is that your floating group have which layout column/row?
(You have put main group as floating group and under that you have put the elements such as text and images, right?)
I want to have blurry gradient the same you have in this design.
you have image of blur only or with the white background full image ?

I apologize for asking too much.

Thank you.

To create a blurry image in the back, you need to use CSS. So basically create a group as parent aligned. Then put whatever you want in it (shapes, pics, etc). Then put another group directly on top again.

Then use CSS to give the top group a background blue attribute, and associated other CSS tags to make it function.

Google Glass morphism generator. That will give you the code, which you can edit as you wish (and likely remove stuff you don’t need). Then put the code into an html element with the style tags on it, and you are good.

1 Like

Thank you soooo much. @troy.roberge
working on it.