Background shapes

[ii8m3r255]

Hello everyone,

I’m looking to enhance the visual appeal of my Bubble.io website by adding background shapes (like triangles, circles, etc.) behind other elements. I want these shapes to look sharp and not pixelated. Here are some details:

1. Background Shapes: I want to add subtle, low-opacity shapes to the background of my groups to make the design more visually appealing.
2. Image Quality: Despite using high-resolution images, they sometimes appear pixelated when used as background elements.
3. Responsive Design: I need the shapes to look good across different screen sizes and devices.

My Questions:

1. Best Practices: What are the best practices for adding background shapes in Bubble.io to ensure they look sharp and not pixelated?
2. Image Formats: What image formats and sizes work best for background shapes in Bubble.io?
3. Tools and Techniques: Can you recommend any tools or techniques for creating and optimizing background shapes specifically for Bubble.io?
4. Implementation Tips: What are some tips for implementing these background shapes in a way that maintains their quality and responsiveness?

i added an example of what i want to achieve

Any advice or recommendations would be greatly appreciated. Thank you!

[jefeoliveira22]

I see 2 ways of achieving this. First is using alight to parent when needed to so you can freely stack stuff on top of each other and space them using paddins and margins. And second play around with negative padding settings and order. So you can force a elemnt to show on top of another element but still using colum or row settings. Also you can use background as image of course.

custom aligment using standard colum ex (transparent image as exemple):

now with negative aligment ex:

now with element order ex: