title: Setting noise GIFs as background
body: <p>Good day.
  I want to set a background with gifs on the site.
  The problem is that the gif itself has a white background and therefore the entire site becomes the same white.
  Is there some way to eliminate this white background.
  The problem is that it overlays on top of everything except the header, which has a z-index of 10. Although I set for a background with noise z-index: -1</p>
  <p>html</p>
  <pre><code>&lt;div class=&quot;noise-bg&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>I use a div and size it to the full width of the screen and also give it position: fixed</p>
  <p>css</p>
  <pre><code>.noise-bg
      position: fixed
      width: 200%
      height: 200%
      top: -50%
      left: -50%
      background: url('../images/general/noise.gif')
      background-size: 1.8%
      pointer-events: none
      z-index: -1
      opacity: 16%
  </code></pre>
  <p>GIF <a href="https://i.stack.imgur.com/dzzC1.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dzzC1.gif" alt="enter image description here" /></a></p>