Background Picture not showing on iphone (safari)

Question

The background picture does not show when I open it on my iPhone or anyone else. On Android devices, it works fine and on a computer in Safari, it also works without a problem.

HTML

<section id="home" class="header">
    <div class="v-middle">
        <div class="container">
            <div class="row">
                <div class="caption">
                    <h5>Hello</h5>
                    <h1 class="headline-Text">I Am <span id="animated-      Text"></span></h1>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

#home {
  background: url("../images/header-background.jpg") no-repeat center center   fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

Answer 1

background-attachment: fixed has huge performance issue read here.

Browser needs to repaint the image in a new location relative to its DOM elements everytime we scroll, this re-paininting costs more for mobile browsers and that's why most of them has disabled this feature.

I will suggest to use media query and change your rule to background-attachment: scroll; for mobile devices. If your project still need this feature on mobile devices, consider using a plugin like Scrollmagic

Answer 2

As @ram pandey suggested, I used media queries:

@media only screen and (max-width: 600px) {
#home {
    background: #000;
    background: url("../images/header-background.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    }
  }