0

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?

This is the thread that I'm following: Background image not showing in Safari But not working for me

<section id="video" class="parallax-section">
 <div class="overlay"></div>
<div class="container">
  <div class="row">

      <div class="col-md-offset-2 col-md-8 col-sm-12">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=kxloC1MKTpg"><i class="fa fa-play"></i></a>
          <h2 class="wow fadeInUp" data-wow-delay="0.5s">WATCH WORKOUT TUTORIAL</h2>
          <p class="wow fadeInUp" data-wow-delay="0.8s">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
      </div>

  </div>
</div>

CSS:

  #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;
   }
Johannes
  • 64,305
  • 18
  • 73
  • 130
Pablo
  • 1,357
  • 1
  • 11
  • 40

1 Answers1

0

You are defining the background size and position in seperate lines in your CSS rule which are contradictory to the ones in the background defition in the first line. So erase the according settings from the background parameter in the first line, like background: url("images/sample.png"):

 #video {
  background: url("http://placehold.it/300x150");
  -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;
   }
<section id="video" class="parallax-section">
 <div class="overlay"></div>
<div class="container">
  <div class="row">

      <div class="col-md-offset-2 col-md-8 col-sm-12">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=kxloC1MKTpg"><i class="fa fa-play"></i></a>
          <h2 class="wow fadeInUp" data-wow-delay="0.5s">WATCH WORKOUT TUTORIAL</h2>
          <p class="wow fadeInUp" data-wow-delay="0.8s">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
      </div>

  </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130