Ok this is totally confusing me. Attached are two images of the same site. One is rendering properly on Mac (firefox, chrome, safari) and properly on Windows (chrome, firefox, edge). However certain touchscreen windows computers using chrome or firefox is rendering the fixed background image in half of the div box. I am at a complete loss please help.
earli.webflow.io is the live site.
Here is my site Read-Only: https://preview.webflow.com/preview/earli?preview=a51fdb8b707ab3f7390a921d6c2d6cc3
@Alex_Villalpando your image properties and your div properties are in correct this is why this is happening some browsers are more strict than others. you gave your div a set with of 500px yet your telling the browser to do min and max 50%. also your image is set to 50% width and 100% that will make the image out of proportion. set the background image to cover then use the image adjust tool to position what part of the image you want to show
Hey @Alex_Villalpando,
We actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).
A work around which you can try is set a Fixed element as the background, try the following: Trouble with fixed background images not remaining fixed on touch screen devices - #3 by Brian_M_Fromknecht
Hopefully this is helpfully 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
