背景画像のスマホ表示がぼやけている

Question

###背景画像のスマホ表示がぼやけている
background-imageで指定した背景画像が、スマホで表示するとぼやけてしまいます。タブレットで表示してもそうなります。chromeのデベロッパーツールでの表示ではそうなりません。

ご回答よろしくおねがいいたします。

<section id="top">
            <header>
                <ul>
                    <li id="logo "><a href="” target="_blank"><img src="image/logo_b.png"></a></li>
                    <li class="jump"><a href="#question" id="q">お問合わせ</a></li>
                    <li class="jump"><a href="#application">募集要項</a></li>
                    <li class="jump"><a href="#entryPeriod">プレエントリー期間</a></li>
                    <li class="jump"><a href="#about">概要</a></li>
                </ul>
            </header>
            <div id="top_msg">
                <p id="subtitle">ああああああああああ</p>
                <h1>ああああああああ<br>あああああああああ</h1>
                <h4>サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー</h4>
                <div class="triangle"></div>     <!--スクロールピクトグラム-->
            </div>    
        </section>

body{
    font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",helvetica,"Open Sans", sans-serif; font-weight: 500;
    margin: 0;
    box-sizing: border-box;
    width: 100vw;
}

section{
    text-align: center;
    position: relative;
}

#top{
    height: 100vh;
    background-image: url(image/background_top.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
header{
    top: 0;
    padding: 0 2%;
    background-color: rgba(255,255,255,1.0);
}
header li{
    list-style: none;
    display: inline-block;
    float: right;
    margin-left: 45px;
}
header ul{
    margin-top: 0;
    padding: 25px 0;
    height: 1.3em;
    /*border-bottom: 1px solid #fff;*/
}
header a{
    text-decoration: none;
    color: #000;
}
#logo{
    float: left;
    margin-left: 0;
}
#logo img{
    width: 130px;
}
#top_msg{
    padding: 0 250px; 
    margin-top: 90px;
    text-align: left;
    color: white;
}
#subtitle{
    margin-bottom: 20px;
}
#top_msg h1{
    font-size: 50px;
    letter-spacing: 5.5px;
    text-shadow: 0.5px 0.5px 7px #999999;
}
.triangle{
    margin-top: 100px;
    margin: 60px auto;
    width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top: 20px solid #fff;
}

###試したこと

<div>で単体の写真をposition:fixed;で指定して見ましたが、他の要素との兼ね合いで背景画像として扱おうとするには煩雑すぎます…

###参考写真（スクショ）

↑スマホ表示（タブレットでもこうなります。）

↑chromeデベロッパーツールでの表示

Comments

[kei344]

どのように解決したかを回答コメント欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

Answer 1

もし background-size: cover; を外したら画像が表示されるのであれば、別の要素がビューポートを押している可能性があります。左右にスクロールできたりしませんか？

Comments

[_ryu-akashi.49]

ご回答ありがとうございます。

【background-size: cover;アリ】
左右にスクロールできません。
【background-size: cover;ナシ】
表示しなくなります…

[kei344]

スクリーンショットから引き伸ばされている状態なのかと思ったのですが・・・。

下記のようにしても表示されませんか？
background-size: auto 100vh;

[_ryu-akashi.49]

画像が表示されなくなりますね。
どっかに行ってるんでしょうか…

[kei344]

background-position: left top;
background-size: auto 100vh;
では見つかりませんか？

[_ryu-akashi.49]

いけましたーーーーーーーー！！！！！！！！！

ただ、もう一ついいですか？
fixedが効いていないです…

[kei344]

いけたということは、#topのサイズがかなり大きなものと解釈されているということになります。（centerで消えたということは中央は画面外にあるということになります）

・HTMLの閉じタグ忘れ
・属性値など""の閉じタグ忘れ
・全角混じり
などを探してみてください。何か別の問題が絡んでいると思います。（fixedもそれに絡まって上手く動いていないかも）

Answer 2

画像ファイルの形式をSVGファイルに変換してみるとかどうですかね？

SVGについてはこちら

変換ソフトは、Inkscape等のソフトがあります。

Comments

[_ryu-akashi.49]

ご回答ありがとうございます。

Inkscape、インストールしましたが起動しません…
オンラインコンバーターで試しましたが、画像が崩れてしまいました。

関連するコードを全て追記したので、よろしければもう一度見ていただきたいです。
よろしくお願いいたします。

Answer 3

id="top"にimage-renderingプロパティをかけてみるとどうでしょうか。
また、できれば他の部分のコードも追記していただけるとうれしいです。

image-rendering: -webkit-optimize-contrast;

Comments

[_ryu-akashi.49]

ご回答ありがとうございます。

変わらなかったです…

関わっているプロパティのコードを全て追記しました。
よろしくお願いします。

[s8_chu]

追記していただいた以下のコードでは"が全角になっているように見受けられますが、質問者さんの手元のコードでもこのようになっているのでしょうか？また、id属性には空白を使用してはいけないのではないかと。
<li id="logo ←ここ"><a href="”←ここ target="_blank"><img src="image/logo_b.png"></a></li>

[_ryu-akashi.49]

すいません、これは固有名詞が入っていたところを消した後処理が雑だっただけです。

[s8_chu]

了解しました。
質問についてですが、background-sizeにベンダープレフィックスをつけてみるといかがでしょうか？
-webkit-background-size: cover;
background-size: cover;

[_ryu-akashi.49]

はじめそうしてたんですが、ダメなんです…
webkitで書いてもダメですね…

[s8_chu]

うーん、難しいですね...
質問者さんのコードを手元のスマートフォンで再現してみたのですが、こちらでは正常に背景画像が表示されるので、他の部分が関係している可能性も考えられますね。