Fix hero background image for mobile safari

index.html

@@ -8,8 +8,8 @@
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
     <style>
      html, body, * { font-family: 'Lato', sans-serif; }
-     .hero-body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 0% 50% }
-     @media screen and (max-width: 900px) { .hero-body { background-position: 50% 50%; } }
+     .hero-body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-position: 0% 80% }
+     @media screen and (max-width: 1100px) { .hero-body { background-position: 50% 50%; } }
      @media screen and (max-width: 600px) { .hero-body { background-position: 65% 50%; } }
     </style>
   </head>