Webstudio
Log in

Join the Webstudio community

Updated 3 days ago

Background Image Not Displaying on Mobile with Fixed Position and Cover Option

aalex FR
·
Hello! Question about body bg_image with cover option and position fixed on mobile.
Transferring site from webflow, there everything worked correctly, on the background of the page is a picture with barrels, the position is fixed and the content of the page scrolls on this background. In webstudio, on the computer in design mode everything is looks correctly, but as soon as I publish the site and check on mobile - the background image is not there, or rather it is stretched to the full height of the page and behaves differently than in the design environment - page link attached - https://maisonnoblesaintmartin.com/. Other settings, for example height 100 VH - also give inadequate result, I tried a variety of options. Checked Chrome and Safary on iphone. Other pages with other bg images also have a similar problem. Although on a computer in different browsers everything looks correct. I can't figure out what could be causing this strange effect, or is it a bug?
Attachments
Screenshot_2025-01-03_at_12.35.38.png
Screenshot_2025-01-03_at_12.34.38.png
s
J
a
4 comments
sszymonszczechowicz
I’ve noticed that the website looks different on various iPhones compared to how it looks in the builder or on a desktop browser when resized. I’m not sure why this happens. I managed to fix it somewhat through trial and error, but the issue was definitely there. I think it might be because mobile browsers work differently, but I’d love to hear from someone with more experience on this and how they handle it.
JJeremy
@szymonszczechowicz, I'd recommend doing this differently than using the image as a background-image. You miss out on some of the optimizations and have less control this way.

  1. Create a background container and place it absolute behind your content
  2. Add you images (plural) into it
  3. Set 1 image to be on your larger breakpoints and the other to be on the mobile breakpoints - this way you can have a completely different image that's vertical vs horizontal. Your users won't need to load that massive desktop image onto their mobile devices.
The more you build, the more you'll find inconsistencies between browsers and OS types. https://caniuse.com/?search=vh You might have a iOS/Safari version that has "buggy behavior" with vh units. More likely, it's just some CSS/structure you can tweak.
Attachment
CleanShot_2025-01-03_at_10.32.402x.png
sszymonszczechowicz
Hi. Thanks for the information. For me, I often have issues with flex, not background images 🙂 On my iPhone, I’m using the latest version of Chrome.
aalex FR
Thanks, yes I realise there are alternative solutions. However, a different image size for mobile can be configured using bg_image without any problems, I don't see it as a big difference. I published this post because I see that the same scheme on the same site on webflow - worked, and I saw the correct display of the site in the same mobile browser, but on webstudio it does not work for some reason. So the question arises why? It's obviously not a property of the browser, but probably there is some difference in how platforms build the final css.
Add a reply
Sign up and join the conversation on Discord