Edyta

PostsComments

KPCKevin Powell - Community

•Created by Edyta on 4/5/2024 in #front-end

Oversized img on iPhones, when other devices are showing img perfectly

"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 😄

9 replies

KPCKevin Powell - Community

•Created by Edyta on 4/5/2024 in #front-end

Oversized img on iPhones, when other devices are showing img perfectly

ohh wow that's interesting, thank you very much iIwill write back here about the results

9 replies

KPCKevin Powell - Community

•Created by Edyta on 4/5/2024 in #front-end

Oversized img on iPhones, when other devices are showing img perfectly

#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

9 replies

KPCKevin Powell - Community

•Created by Edyta on 4/5/2024 in #front-end

Oversized img on iPhones, when other devices are showing img perfectly

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); }

9 replies