Cover Image not appearing on Mobile Site but working fine normally

My personal website works totally fine on everything but mobile devices...when it comes to mobile, for some reason, the cover image of the site just doesn't appear. Instead, it's just a white background.

Here's my css for the div with the cover photo:

#cover-image {
  height:100%;
  background-image: url(images/meAndTheOcean.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

I have this in head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the div #cover-image:

<div id="cover-image" >
  <nav class="cl-effect-1 container-fluid">
    <div id="nav-bar" class="nav1">
      <div class="col-sm-3 text-center"><a href="#about">About Me</a></div>
      <div class="col-sm-3 text-center"><a href="#work">Work Experience</a></div>
      <div class="col-sm-3 text-center"><a href="#projects">Projects</a></div>
      <div class="col-sm-3 text-center"><a href="#contact">Contact</a></div>
    </div>
  </nav>
  <div id="Name" class="container-fluid">
    <div class="col-xs-12" style="height:100px;"></div>
    <div class="col-md-6 text-center"><canvas id="FirstName"></canvas></div>
    <div class="col-md-6 text-center"><canvas id="LastName"></canvas></div>
  </div>
</div>

What's even more strange is that it used to work on mobile a few weeks ago, and for some reason it no longer does...

Any advice would be helpful! Thank you!