Background Picture not showing on iphone (safari) [duplicate] - html

Question

This question already has answers here:
Background image not showing on iPad and iPhone
(15 answers)
Closed 3 years ago.
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;
}
}