title: CSS - background-image is showing up on my machine, but not on the hosted version of my site... why?
body: <p>For my portfolio site, I had a gif for my background image. It was fine for a few weeks, but now it has stopped working. I tried putting in a different GIF. It looks fine on my local machine, but when pushed up to my host, it no longer works. Not sure what the problem is for it to show up on my computer but not when it's hosted.</p>
  
  <p><a href="https://i.stack.imgur.com/1XgpD.png" rel="nofollow noreferrer">When it's working properly on my machine - see the triangles?</a></p>
  
  <p><a href="https://i.stack.imgur.com/oyLKn.png" rel="nofollow noreferrer">When it's not working on the actual website</a></p>
  
  <p>The site is hosted at <a href="http://www.KimberlyScarabello.com" rel="nofollow noreferrer">http://www.KimberlyScarabello.com</a>.</p>
  
  <p>I'm fairly certain I'm updating the files correctly, because other changes are showing up just fine. This is the CSS that I'm using. I have already tried saving the gifs to my local machine and putting the file path in the url, but that didn't work (though it also works on my machine).</p>
  
  <pre><code>#wrapper &gt; .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #212931;
          background-image: url('https://media.giphy.com/media/xTg8BbPcaAP43oVyeY/giphy.gif'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
          background-size: cover,                             auto,                                                       100% auto;
          background-position: center,                                center,                                                     top center;
          background-repeat: repeat,                              no-repeat,                                                  no-repeat;
          background-attachment: scroll,                              scroll,                                                     scroll;
          z-index: -1;
          filter: brightness(10%)
      }
  </code></pre>