0

Background image works fine on everything else but on iphones. the image looks like zoomed in too much.

Thanks in advance

.header {

min-height: 100vh;

background: url('/images.jpg') center/cover no-repeat fixed;
margin-top: auto;
padding: 13px 0px;
border-radius: 100px;
border-top-left-radius: 0 ;
border-top-right-radius: 0;
font-weight: bold;

color:white;
cursor: pointer;
border: 2px white;
margin-top: 0;
font-size: 12px;
background-size: cover;



<header class="header">
    <div class="hero">
        <h1 class="title"><img src="/images/Logo_big.png    " alt="logo" class="responsive"></h1>

        <a href="#contact" class="hero-button pulsate">About Us</a>

    </div>
user8352676
  • 33
  • 5
  • Possibly related to this question: https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7 – ausi Jun 06 '20 at 19:01
  • Does this answer your question? [Fixed background image with ios7](https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7) – Dave Jun 06 '20 at 19:27

2 Answers2

1

Add this meta tag...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

is it helpful?

SoliMoli
  • 781
  • 2
  • 6
  • 25
0

Remove fixed in background property, like this:

background: url('/images.jpg') center/cover no-repeat;

There seems to be an issue around background-attachment: fixed + background-size: cover in Opera + IOs. This will remove the parallax effect but at least it wont be zoomed in.

For more info:

AkuLink1
  • 123
  • 10