Фоновое изображение размыто на мобильных ios

Это, вероятно, вопрос новичков, однако я не могу найти решения проблемы, которая у меня есть. На моем веб-сайте у меня есть фоновое изображение, которое отлично отображает рабочий стол на любом экране, но становится размытым беспорядок при просмотре на мобильном устройстве. Я видел несколько подобных вопросов, ни с ответами, ни с решением, которое не сработало для меня, любая помощь была бы очень оценена.
Here is the website

Вот несколько скриншотов того, что я испытываю. И вот мой код.Фоновое изображение размыто на мобильных 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; 
}

источник

2016-06-28 kgoode517

EDIT: Valentino Kožinec является правильным. Похоже, что проблема с iOS исправлена и исправлена.

Изменение .home к этому:

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

и удалить

background-attachment: fixed;

Это похоже на работу.

У вас есть теги Doctype и head, а затем внутри вашего тела у вас есть их снова. Это может вызвать проблемы. Стоит посмотреть.

Это скопировать и вставить сюда с вашего сайта:

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

источник

2016-06-30 02:43:24

Спасибо, Джейсон! Это заставило вас поблагодарить вас за то, что вы указали заголовки! – kgoode517

Нет проблем. Рад, что смог помочь! –

Try включая положение центра на вашем CSS и посмотреть, если это помогает.

background-position: center center;

источник

2016-06-28 18:30:27 Hemchand

Спасибо за ответ, но это, кажется, не имеют никакого эффекта. – kgoode517

Существует аналогичный ответ на стеке уже

вы, вероятно, проблема с фоном положением: фиксированная и фоном-размер: крышка при использовании их вместе. Попробуйте удалить первый и посмотреть, есть ли проблема.

Возможно, вы можете сделать медиа-запросы для класса .home и поместить обрезанное изображение или другое обходное решение.

источник

2016-06-28 19:29:53

Спасибо, что посмотрели Валентино! Я прочитал вопросы, о которых вы говорите, но я использую привязанность к фону, но не позицию. Единственное фоновое положение, которое я использовал, - центр, о котором посоветовал Хемчанд. Восстановление моего фонового привязанности не влияет на размытость моего фонового изображения. – kgoode517

Фоновое изображение размыто на мобильных ios

ответ

Смежные вопросы