title: Safari: Background-image not showing
body: <p>This code is working fine using Chrome, IE, Opera, but not using Safari. I don't know why. I tried to follow some threads but none of them help me to show the background image of this section. Now I'm thinking maybe there's appropriate code of background-images for Safari? </p>
  
  <p>This is the thread that I'm following: <a href="https://stackoverflow.com/questions/17341728/background-image-not-showing-in-safari">Background image not showing in Safari</a> But not working for me</p>
  
  <pre><code>&lt;section id="video" class="parallax-section"&gt;
   &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
  
        &lt;div class="col-md-offset-2 col-md-8 col-sm-12"&gt;
            &lt;a class="popup-youtube" href="https://www.youtube.com/watch?v=kxloC1MKTpg"&gt;&lt;i class="fa fa-play"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h2 class="wow fadeInUp" data-wow-delay="0.5s"&gt;WATCH WORKOUT TUTORIAL&lt;/h2&gt;
            &lt;p class="wow fadeInUp" data-wow-delay="0.8s"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.&lt;/p&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>  #video {
    background: url("images/sample.png") 50% 0 repeat-y fixed;
    -webkit-background-size: cover;
     background-size: cover;
     background-position: center center;
     position: relative;
     color: #999;
     -webkit-filter: grayscale(100%); 
     filter: grayscale(100%);
     }
     #video .overlay {
     background: rgba(03,03,03,0.6);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     }
  </code></pre>