title: HTML .png blurry
body: <p>I'm currently working on a website using a template and when I replaced the background image I noticed that it's blurry. I've read a lot online that it has to do with the <code>z-index</code>, but changing that does absolutely nothing for me. This is the code on the html/css file. <br /><br />I would be very happy to hear any suggestions towards fixes. Never posted on here before, so just ask whatever you need, if I forgot something</p>
  
  <pre class="lang-css prettyprint-override"><code>.single-slider {
      background-position: center center;
      background-size: cover;
      padding: 80px 0;
      position: relative;
  
  }
  
  .single-slider::before {
      background:  none repeat scroll 0 0;
      content: "";
      height: 100%;
      opacity: 0.;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 99;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="single-slider" style="background-image:url(img/slider/background-home.png)"&gt;
  &lt;/div&gt;
  </code></pre>