Cover Image not appearing on Mobile Site but working fine normally

My personal web site 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!

It depends on what mobile device you are viewing your site, but the problem could come from the background-attachement: fixed, which doesn't always work well on smartphones.

I'm not sure it could be problematic to the point of making the image disappear completely, but you never know ;)