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

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

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

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

css
1body{
2    font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",helvetica,"Open Sans", sans-serif; font-weight: 500;
3    margin: 0;
4    box-sizing: border-box;
5    width: 100vw;
6}
7
8section{
9    text-align: center;
10    position: relative;
11}
12
13#top{
14    height: 100vh;
15    background-image: url(image/background_top.png);
16    background-repeat: no-repeat;
17    background-attachment: fixed;
18    background-position: center center;
19    background-size: cover;
20}
21header{
22    top: 0;
23    padding: 0 2%;
24    background-color: rgba(255,255,255,1.0);
25}
26header li{
27    list-style: none;
28    display: inline-block;
29    float: right;
30    margin-left: 45px;
31}
32header ul{
33    margin-top: 0;
34    padding: 25px 0;
35    height: 1.3em;
36    /*border-bottom: 1px solid #fff;*/
37}
38header a{
39    text-decoration: none;
40    color: #000;
41}
42#logo{
43    float: left;
44    margin-left: 0;
45}
46#logo img{
47    width: 130px;
48}
49#top_msg{
50    padding: 0 250px; 
51    margin-top: 90px;
52    text-align: left;
53    color: white;
54}
55#subtitle{
56    margin-bottom: 20px;
57}
58#top_msg h1{
59    font-size: 50px;
60    letter-spacing: 5.5px;
61    text-shadow: 0.5px 0.5px 7px #999999;
62}
63.triangle{
64    margin-top: 100px;
65    margin: 60px auto;
66    width: 0;
67	height: 0;
68	border: 20px solid transparent;
69	border-top: 20px solid #fff;
70}
71

###試したこと

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

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

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

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

kei344

2017/01/06 02:05

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

投稿2017/01/05 06:38

kei344

総合スコア69400

_ryu-akashi.49

2017/01/05 08:07

ご回答ありがとうございます。【background-size: cover;アリ】左右にスクロールできません。【background-size: cover;ナシ】表示しなくなります…

kei344

2017/01/05 08:28

スクリーンショットから引き伸ばされている状態なのかと思ったのですが・・・。下記のようにしても表示されませんか？ background-size: auto 100vh;

_ryu-akashi.49

2017/01/05 09:57

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

kei344

2017/01/05 12:26

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

_ryu-akashi.49

2017/01/05 12:59

いけましたーーーーーーーー！！！！！！！！！ただ、もう一ついいですか？ fixedが効いていないです…

kei344

2017/01/05 13:08

いけたということは、#topのサイズがかなり大きなものと解釈されているということになります。（centerで消えたということは中央は画面外にあるということになります）・HTMLの閉じタグ忘れ・属性値など""の閉じタグ忘れ・全角混じりなどを探してみてください。何か別の問題が絡んでいると思います。（fixedもそれに絡まって上手く動いていないかも）

行動規範の内容に同意します

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

SVGについてはこちら

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

投稿2017/01/05 06:50

nojytatsu

総合スコア36

_ryu-akashi.49

2017/01/05 08:28

ご回答ありがとうございます。 Inkscape、インストールしましたが起動しません… オンラインコンバーターで試しましたが、画像が崩れてしまいました。関連するコードを全て追記したので、よろしければもう一度見ていただきたいです。よろしくお願いいたします。

行動規範の内容に同意します

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

HTML
1image-rendering: -webkit-optimize-contrast;

投稿2017/01/05 06:35

s8_chu

総合スコア14731

_ryu-akashi.49

2017/01/05 08:23

ご回答ありがとうございます。変わらなかったです… 関わっているプロパティのコードを全て追記しました。よろしくお願いします。

s8_chu

2017/01/05 08:27

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

_ryu-akashi.49

2017/01/05 08:46

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

s8_chu

2017/01/05 10:55 編集

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

_ryu-akashi.49

2017/01/05 12:55

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

s8_chu

2017/01/05 13:46

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