Streaming live at 10am (PST)

Background Image not responsive


#1

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.


#2

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.


#3

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.


#4

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.


#6

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 http://forum.webflow.com/t/issue-with-fixed-image-backgrounds-on-mobile-devices/13403/9 for further information.

--
Dylan // Digital Liberation


#7

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.


#8

@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.


#9