Background Image not responsive

Section background Image not responsive:

When I view it in the “Design” Mode on the mobile or table view it works fine but when I publish it, its not making the Image in the Section Background showing up in the right way, it’s keeping it like in the desktop view.

The background image is: Centered, fixed and cover.

this problem will show up when viewed only in Iphone 5 & ipad 2 or other mobile devices not when resizing the browser screen.

Ok after doing some troubleshooting, I see that this problem is not happening only when the background image is “fixed” mode but in all the modes

So there is a bug there I think.

Ok after playing around I found out that for the background image to work right in responsive ( mobile & tablets ) you will need to upload the image in each Design View ( in Tablet & mobile view ) the image needs to be:

  • Contaned
  • No repeat ( No tile )
  • Centered
  • And then you fix the hight of the contaner so you dont have a margin

This worked for me.

Thanks for reporting this bug Kiku. It’s a bug with background image cascading. We’re working on fixing it. For now click on “Image & Gradient” and clear it on Tablet and Mobile views and the image will cascade down to these devices as you’d expect.

So folks know, this issue is still occurring - I worked w/ @thewonglv from Webflow Support and we were able to produce a workaround in lieu of this preview bug. You can view my post on the newer thread related to this at Issue with fixed image backgrounds on mobile devices - #9 by DLI - General - Forum | Webflow for further information.


Dylan // Digital Liberation

I would like to know whether this issue has been resolved or not. Just checking because I’m having the same problem today and this post is from August :frowning: so I was hoping to see a solution in here. Thanks.

@Sambatia this issue has been fixed a while ago, but there may be some sites with corrupted background images. Please email support@webflow.com and we’ll help you out.