Background image blurry on mobile ios

This is probably a rookie question however, I cannot seem to find any solution to the problem that I am having. On my website I have a background image that renders totally fine on desktop at any screen size but becomes a blurred mess when viewed on mobile. I have seen several similar questions with either no answers or a solution that did not work for me any help would greatly be appreciated.
Here is the website

Here are some screenshots of what I am experiencing. And here is my code.

<div class="jumbotron"> <h1 class="text-center" id="head">Kyle Goode</h1> <p class="text-center" id="header">Full Stack Web Developer</p> </div> </div>

  .home {
  background: url(http://mrg.bz/VN5LDd) fixed no-repeat center;
  background-attachment: fixed;
  background-size: cover !important;
  max-width: 100%;
  height: 900px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}