Hintergrundbild verschwommen auf Handy iOS

Dies ist wahrscheinlich eine Anfängerfrage, aber ich kann nicht scheinen, eine Lösung für das Problem zu finden, das ich habe. Auf meiner Website habe ich ein Hintergrundbild, das auf dem Desktop bei jeder Bildschirmgröße völlig in Ordnung ist, aber auf Mobilgeräten zu einem verschwommenen Chaos wird. Ich habe mehrere ähnliche Fragen mit entweder keiner Antwort oder einer Lösung gesehen, die für mich nicht funktionierte.
Here is the website

Hier sind einige Screenshots von dem, was ich gerade erlebe. Und hier ist mein Code.Hintergrundbild verschwommen auf Handy iOS

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

Quelle

2016-06-28 kgoode517

EDIT: Valentino Kožinec hat Recht. Scheint ein iOS-Problem mit festen und Cover zu sein.

ändern .home dazu:

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

und entfernen

background-attachment: fixed;

Es scheint zu funktionieren.

Sie haben Doctype und Kopf-Tags, dann in Ihrem Körper haben Sie sie wieder. Dies könnte Ihre Probleme verursachen. Einen Blick wert.

Dies wird kopiert und hier von Ihrer Website eingefügt:

<!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>

Quelle

2016-06-30 02:43:24

Das macht vollkommen Sinn danke Jason! Das hat es richtig gemacht Danke, dass du auf die Deklarationen des Kopfes hingewiesen hast! – kgoode517

Kein Problem. Froh, dass ich helfen konnte! –

Versuchen Sie, eine mittlere Position auf Ihrem css einschließlich und sehen, ob das hilft.

background-position: center center;

Quelle

2016-06-28 18:30:27 Hemchand

Danke für die Antwort, aber das scheint keine Wirkung zu haben. – kgoode517

Es gibt ähnliche Antwort auf Stapel bereits,

Sie wahrscheinlich Problem mit Hintergrund-Position haben: feste und Hintergrund-size: Abdeckung, während sie zusammen mit. Versuchen Sie, die erste zu entfernen und sehen Sie, ob das Problem immer noch besteht.

Sie können wahrscheinlich Medienabfragen für die .home-Klasse erstellen und zugeschnittene Bilder oder andere Problemumgehungen einfügen.

Quelle

2016-06-28 19:29:53

Danke für einen Blick Valentino! Ich habe die Fragen durchgelesen, auf die Sie sich beziehen, aber ich verwende den Hintergrundanhang, nicht die Position. Die einzige Hintergrundposition, die ich verwendet habe, ist das Zentrum, das Hemchand empfohlen hat. Das Entfernen meines Hintergrundanhangs hat keinen Einfluss auf die Unschärfe meines Hintergrundbildes. – kgoode517

Hintergrundbild verschwommen auf Handy iOS

Antwort

Verwandte Themen