cssiosmobileresponsive

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 web site 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. Website pic 1 enter image description here

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>

  .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;
}
Solution

  • EDIT: Valentino Kožinec is correct. Appears to be an iOS issue with fixed and cover.

    Change .home to this:

    .home {
  background: url(http://mrg.bz/VN5LDd) no-repeat center;

    and remove

    background-attachment: fixed;

    It seems to work.

    You have Doctype and head tags, then inside your body you have them again. This may be causing your issues. Worth a look.

    This is copied and pasted here from your site:

        <!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Portfolio </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">



        <link rel="stylesheet" href="css/style.css">




  </head>

  <body>

    <!DOCTYPE html>
<html lang="en">

<head>

  <!--Meta -->
  <title>Goode Web Development</title>

  <meta charset="utf-8">

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


  <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>

 <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



 </head>