I am using the Magnetic Template – The background image won’t “Contain” fully when published for mobile. This was occurring before I changed anything such as making the height 100vh for both body and height. I have used this template before and did not notice this problem before, although I am also noticing that this is an issue with this template for other landing pages I have made, such as officialohm.webflow.io
http://magnetictemplate.webflow.io/ — I noticed that the template is using a tiled background… is there any way around using a tiled background?
What do you mean with “Contain” @simplypractical, do you mean as in it doesn’t resize or something else? Because right now the background does take the whole screen even on mobile its on full scale.
Whoops, I meant “Cover” in regards to the background image display. When I view it on mobile, the image doesn’t fill the screen - unsure as to why. Examples below.
I checked out the images @simplypractical and saw that it’s indeed different on my phone compare to desktop. I also noticed your webflow image (in the editor) is different then the live version.
So is it possible you changed some of the function? On my phone the image is tiling instead of covering the whole screen, while on the PC it’s working fine.
For each platform (desktop, tablet, etc) it’s set for the background to “Cover” and should cover the whole page… but on my IPhone 6 it doesn’t seem to be the case. I have also tested this out on the Nexus 5X.
Hmmm… Well I used this template for another landing page I created and before I did not have a problem with the background image. I noticed that I was having issues with this site (franchescaamaya7) and decided to check the other site (officialohm)-- same problem occurred even though I didn’t even know there was a problem… wondering if it’s a backend issue now?
Hi @simplypractical, the main issue is that in the design, the image you are using as a background is fixed, and also added to the body class and section class, and applying a fixed position to background images is not supported very well on mobile devices (especially iOS).
A better method to get consistent results on any device, is to put a div under the body, give it a class, then apply a fixed positioning on the div, with full cover and z-index of -1. Next, assign the background image to the div, with full cover and center position, with tile set to off. Do not set the fixed position on the background image, only on the parent div the background image is being assigned to.