8

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

3 Answers 3

13

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>
4
  • That makes perfect sense thank you Jason! That fixed it right up thank you for pointing out the head declarations!
    – kgoode517
    Jun 30, 2016 at 13:14
  • No problem. Glad I could help! Jun 30, 2016 at 14:57
  • 1
    This solution just earned me $70, if we ever meet I'll buy you a beer! Thank you :) Apr 21, 2019 at 7:23
  • 1
    this solution still works, just fixed a site of my client.
    – Zia Ahmad
    Apr 10, 2021 at 17:26
4

There is similar answer on stack already,

you probably have issue with background-position: fixed and background-size: cover while using them together. Try to remove first one and see if problem is still there.

You can probably than make media queries for .home class and put cropped image or other workaround.

1
  • Thanks for taking a look Valentino! I had read through the questions you are referring to but I am using background attachment fixed not position. The only background position I have used is the center center that Hemchand has advised.Removing my background attachment has no effect on the blurriness of my background image.
    – kgoode517
    Jun 28, 2016 at 19:56
0

Try including a centre position on your css and see if that helps.

 background-position: center center;
1
  • Thanks for the answer but that seems to have no effect.
    – kgoode517
    Jun 28, 2016 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.