Background image cropping issues

[palateandcraft]

Hi,

I’ve created 3 pages so far using the same background image. I find it odd that the background image in one of my page has crop out the item but not the picture. I know it sounds confusing but you’ll understand once you see the picture below.

1. The background image for my welcomepage
   
   

2.Log in page

3. Issue here
   Notice how the tote bag is out of place
   
   

4.To clarify, i’ve place the totebag and position it in illustrator.
This is the image i’ve used for background image

5. In editor page, the image is fine withing the editing board but not in preview
   

   

6. The preview and editor page is not the same thing
   

   

please help. I’m stuckkkk. Can somebody explain please?

[rpetribu]

This is the background of your page? Or is it inside an image holder? Or is it the background of a group? Can you share the configuration of your page? Is it a row? A column? Width… height…
Can you share the link of you app? Can you share your editor?

[palateandcraft]

this is the background image i’ve place it in a group that’s set to be a column. i’ve set 0 width as minimum, max width as infinite. Same goes to height.

I’m scratching my head for i dont get it why the editor and preview framing for my canvas body is so off.

1. Editor
   

   

2. Preview
   

   

3. Editor page for 3-draw-main-mobile
   Palateandcraft | Bubble Editor

4. App link
   https://palateandcraft.bubbleapps.io/

Update, I’ve noticed everything i refresh or use a different browser to preview, the red canva body will be reposition to the right place again. I’m just wonder is bubble bugging or is it my fault for not getting it right?

5. I’m using incognito mode to view the live page, It’s working now but when i switch back to my regular browser the framing is off again.
   
   

Thank you.

[rpetribu]

Worked for me.

The issue is the debug mode’s bottom bar.
Try to remove the “?debug_mode=true” of the end of your URL.

[palateandcraft]

thank you

[rpetribu]

Anyway… this is not the best way to go…

The best way to do it is to place an image centered in you page with the bag.png as it’s background.
On top of it, in the same group, you place your design board.
Doing this, no matter the size of the screen, your bag will always be centered and never distorced.

Look how weird it looks at higher resolutions…

[palateandcraft]

Will make changes according to your suggestion. Thank you so much!