On Webflow, there is an option for Tablet Portrait, but it is missing Tablet Horizontal.
On my iPad, when I switch to Horizontal view, the background is not correct at all. I have tried to fix this all day, but cannot get it to view my background image correctly.
Anybody as a clue how to fix this?
Tablet Portrait
Tablet Horizontal
Hi @liberrtines the resolution for Tablet Landscape is the same as the default desktop (960px) resolution. So if you look at your website on a Landscape Tablet it will look the same as on a laptop. Try to change that background image in the default view and see if it helps.
Does that help?
Sorry it does not do anything.
In fact, my container is not set to 960px, but 1200px. I set the container to 1200px using a tip I found here on this forum. So, the background that is the default view as the laptop does not look the same on Tablet Horizontal. I still can't seem to figure it out.
When I see it again, it's not even the same image as the other views haha.
I don't know how to fix this, I can't even fix it manually. It's very strange.
That's why you're having problems in the 960px view (which is what you see in Tablet Landscape. If you set that container to 1200px, everything inside of it will be off and not be responsive.
I'd recommend removing the 1200px and using basic containers as containers because they will work responsively with different devices. Then add this code to activate the 1200px media query:
This will automatically size your container to 1200px on bigger monitors, not 960px resolutions.
Thanks, but that's exactly what I did before I began the site on web flow.
All my container is auto width, but I added that code in my custom code tab..exactly that.
What's confusing is that the image I see in Tablet Landscape is not even in my images folder, but it appears (cache cleared on safari tablet) - It happens on Chrome Application on iPad as well.
I looked up your account and saw that you have radio-studio.jpg in that section. You can remove it by clicking on Image & Gradient blue link and removing that property from that "Section, SNCF Guy" selector.
@thesergie @liberrtines I'm having the same issue. For me, it's an issue with the "fixed" option. If you have a banner that scrolls/parallax on desktop view, the image enlarges and pixelates when looked at on an ipad & phone. It's challenging since it still looks fine through Webflow's UI.
If you lock the "fixed" option and make sure "Cover" is selected, that should work around the issue.
Not sure how to do parallax on ipad & phone - haven't actually figured out how to solve the issue yet.
I'm still having this problem.
Is there a staff here that can help me resolve this?
I tried to lock 'fixed' with cover selected, but on landscape on my iPad, the images are still pixalated and extremely large. I tried to remove my custom container of 1290 and keep it default, but still the same problem.
Please help 
@liberrtines yeah, I bumped into the same issue this weekend. It's visible on both the default 960px responsive grid and my other version of the same site - one that was 1140px. I've turned it on/off a bunch of times now, and for me it's definitely been an issue with the 'fixed' option.
Here is how I solved it:
1) Make sure 'cover' is selected.
2) Make sure 'tile' is off ("x" should be selected)
3) Make sure 'fixed' is off ("x" should be selected)
4) After the project saves, re-publish your project. It may take a few moments for your sites' changes to load so if you don't see anything try clearing your history/cache and reloading.
I'd recommend opening up your dashboard/project settings in a new tab. It allows you to work in one window then publish quickly in another.
@thesergie @liberrtines - been playing with this a little bit - I definitely think it's a Webflow bug.
If you want your desktop website to have a fixed cover effect, set it to be visible on desktop only. Then copy the image section to your other views, make sure fixed is off, and have this version visible on tablet & phone views only (not desktop).
Result is that image will be fixed on desktop, and 'flat' on vertical tablet & both phone versions.
Unfortunately, your image will still be pixelated on horizontal tablet view until bug is fixed.
@Todd @liberrtines that's really odd behavior and sounds like a bug with the background image inheritance. Sorry for the workarounds! We'll be pushing a fix this week or next week that should clear this up.
Same problem occurring here. On desktop everything looks OK, tablet portrait OK, smartphone portrait + horizontal OK,... However I discovered on tablet horizontal view backgrounds are same as problems described above.
If you wish, check my page on tablet. You can see on portrait it looks ok, but on horizontal view bg's are messed up.
http://www.rowan-saran.nl
Looks like a bug!
@rowan thanks for pointing this out! We'll look into why this is happening on tablet landscape.
@rowan @liberrtines Thank you for your patience! I've been investigating this odd issue, and it turns out that it was caused by an extra parameter that was specified in the <head> section of the code that we exported:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It needs to be changed to this:
<meta name="viewport" content="width=device-width">
I've updated our publish template to reflect this change, so if you re-publish (or re-export), it should fix it for you. However, please let me know if it does not, and I will take a deeper look.
Thanks again for helping us figure this out!
Problems seems partially fixed. Although still some background images are not shown correctly.
These images have a "fixed" style in default view. Other background images with a "Scroll" view are shown ok.
Ipad landscape view should show default view, no? Maybe background images with "fixed" setting create an error for landscape view?
@rowan, have some unwelcome news: we have decided to revert the change above, so you will likely see this bug appear again if you re-publish.
The reason we are pulling the change is that removing initial-scale=1 breaks the switch between portrait/landscape orientations on all iOS devices, so your customizations in Webflow between landscape/portrait don't work as intended. Instead, iOS devices load the initial version (e.g. portrait if you happen to load the site in portrait mode) and then scales it for the other orientation. So switching to landscape mode (wider screen) after loading in portrait shows a pixelated version that was intended for the narrower screen.
In other words, the change above breaks a lot more sites than it fixes. :\ Going back to the drawing board to figure out how to fix the background-image: cover issue that you're seeing...
Currently, the only known workaround is to set background-attachment: none; (not fixed, so uncheck the Fixed option in Webflow), but that does affect the desktop resolution as well (since 'Tablet Portrait' has the same resolution as desktops).
