Oversized img on iPhones, when other devices are showing img perfectly
Im using parallax effect on my website, background image is set as a bgc-img: url() in CSS. Image is working ok on every single device but not on iPhones - the only thing i can see is pixelized, oversized left corner of that image. Does anyone know what can couse this issue? Thank You for any information
7 Replies
Hey, do you have any code snippets or images to show? This might help us 🙂
Have you tested different browsers on the iPhone or just Safari?
Hey, thank you for a respond 🙂 my html looks like that:<header class="header-background parallax" id="home">
<div class="parallax-layer-back">
<div class="header-buttons">
<a href="#section-atractions"><button class="where-to-go">Gdzie by tu pójść</button></a>
<a href="#section-restaurants"><button class="where-to-eat">Co by tu zjeść</button></a>
</div>
<img class="header-logo" src="assets/domek-logo.png" alt="domek-pierwiosnek-logo">
</div>
</header>. CSS : .header-background { background-attachment: fixed; background-position: center; background-size: cover; height: 100vh; width: 100%; color: #FFFFFF; } .parallax { background-image: url(assets/domek-pierwiosnek-bgc.jpg); }
</header>. CSS : .header-background { background-attachment: fixed; background-position: center; background-size: cover; height: 100vh; width: 100%; color: #FFFFFF; } .parallax { background-image: url(assets/domek-pierwiosnek-bgc.jpg); }
can you make a minimal testable example, and put it on codepen or jsfiddle?
#hilli i dont have an iphone to test it, thats the person im preparing this project for, told me about that issue, also a few of her friends
i remember this was an issue years ago, don't know if it still is the case. but back then the combination of background-attachment: fixed and background-size: cover was an issue
here i found a stack overflow article https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
Stack Overflow
background-size: cover not working on iOS
This is my code:
background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-...
ohh wow that's interesting, thank you very much iIwill write back here about the results
"This caused me a number of problems as well. The problem is that iOS is using the full height & width of the body instead of the viewport to decide the size.
Our solution was to create a new <div class="backdrop"></div>.
We apply the background to this div and give it position: absolute; top: 0; bottom: 0; left: 0; right: 0.
Since this div is now the size of the viewport, background-size: cover works just fine." - this solution works!! Thank You 😄