モバイル画像でぼやけた背景画像

これは新人の質問ですが、私が抱えている問題の解決策を見つけることができないようです。私のウェブサイトでは、画面サイズでデスクトップ上で完全にレンダリングされる背景画像を持っていますが、モバイルで見るとぼやけてしまいます。私は何も答えないか、私にとっては役に立たなかった解決策をいくつか似たような質問を見たことがあります。
Here is the website

ここに私が経験しているもののスクリーンショットがあります。ここに私のコードです。モバイル画像でぼやけた背景画像

<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：ValentinoKož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

問題ありません。お役に立てて嬉しいです！ –

あなたのCSSの中心位置を含めてみて、それが助けかどうかを確認します。それらを一緒に使用しながら、カバー：固定と背景サイズ：あなたはおそらく背景位置に問題がある

すでにスタック上に同様の答えがあり

background-position: center center;

出典

2016-06-28 18:30:27 Hemchand

おかげでそれは効果がないようです。 – kgoode517

、。最初のものを取り除き、問題がまだ残っているかどうか確認してください。

おそらく、.homeクラスのメディアクエリを行い、切り取ったイメージやその他の回避策を置くことができます。

出典

2016-06-28 19:29:53

Valentinoを見てくれてありがとう！私はあなたが指している質問を読んだが、私はバックグラウンドの添付ファイルを使って固定していない。私が使用した唯一のバックグラウンドポジションは、Hemchandがアドバイスしたセンターセンターです。私のバックグラウンドの添付ファイルを削除しても、私のバックグラウンドイメージのぼかしには何の影響もありません。 – kgoode517

モバイル画像でぼやけた背景画像

答えて

関連する問題