Color background main group page

Hi everyone,

I’m very new to Bubble and currently facing a challenge with my application and would greatly appreciate any guidance or solutions you might have. My goal is to have a background that is truly responsive and stretches to cover the entire viewport of the browser window, regardless of device or screen size. However, I’m encountering issues with the conventional “Full width” setting, as it seems to only adjust the width relative to the preset dimensions of the page, rather than dynamically adapting to the actual size of the browser window.

The Core of the Issue:

When I apply the “Full width” option to a group or the page itself, it indeed stretches across the width based on the predefined page size in the Bubble editor. However, this does not achieve the effect I’m looking for, which is a background that fully covers the browser viewport, both in width and height, without necessitating the input of specific dimensions or influencing the layout of other page elements.

I didn’t not find a way to use another group as a autonomously responsive background since every try to make its dimensions infinite leads to my page responsive sets (that I want not responsive).

What I’m Seeking:

A Method to Create a Responsive autonomous Background: A way to implement a background that dynamically adjusts to the full size of the browser’s viewport and allows the rest of the page elements to maintain their intended layout and responsiveness, without being affected by the background’s behavior.

Add an image element inside this group and set it as the background image. Adjust the image’s settings (position, size, etc.) as needed to fit your design requirements.