CODEWITHSUNDEEP
htmlcssiosiphonebackground-image
user8352676
user8352676

Reputation: 33

Background image is too zoomed in on iphone

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>

Upvotes: 0

Views: 1439

Answers (2)

AkuLink1
AkuLink1

Reputation: 123

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:

Upvotes: 0

SoliMoli
SoliMoli

Reputation: 796

Add this meta tag...

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

is it helpful?

Upvotes: 1

Related Questions