Background Image not displaying on iPhone

Question

How do I make the background image display on iPhone as it displays on Android?

HTML

<div class="bgimg-1">    
    <div class="hometoptext ">
        <h1 class="text-center">
            Africa's First Online Business Lender
        </h1>
        <div>
            <h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
        </div>
        <div class="text-center">
            <button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
        </div>
    </div>
    <div class="bottom-arrow text-center">

    </div>
</div>

Background Image not displaying on iPhone

CSS

.bgimg-1 {
    background-image: url("img/main_pic2.png");
    color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-color: #999;
    position:relative;
    width:100%;
    min-height: 100vh;
    top: 0;
}

Image on Android:

Image on iPhone:

Answer 1

• iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed ;
• Safari (OS X and iOS) and Chrome do not support background-size: 100% px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.
• iOS Safari has buggy behavior with background-size: cover; on a page's body.
• macOS Safari 10 is having frame rate issue with background-size .
• Android 4.3 browser and below are reported to not support percentages in background-size

Ref : Link

Answer 2

A possible solution to this issue is still a pure CSS Fallback

CSS Tricks has three great methods, the latter two are fall backs for when CSS3's cover doesn't work.

HTML

<img src="img/main_pic2.png" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

Answer 3

The background image is not supported on iOS devices. Proof link: https://caniuse.com/?search=background-url