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

Question

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

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

関係していると思われる部分のみコードを下記に表示いたします。

.school-wrapper {
  width: 100%;
  height: 800px;
  margin-top: 68em;
  background-image: url("img/school-img.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*タブレット用css*/
@media screen and (max-width: 768px) {
.school-wrapper {
  width: 100%;
  height: 800px;
  margin-top: 70em;
} 
}

Comments

[K_3578]

なんという偶発的事象か
タイトルから質問文の書き方まで全く以てそっくりな質問が過去にあったので
見てみては。
https://teratail.com/questions/60938

[Lhankor_Mhy]

現象を確認したスマホはなんでしたでしょうか？

[Ryoma2001]

こちらの質問は確認して同じようにしたのですが、改善されませんでした。
iPhone１１です

[Lhankor_Mhy]

iOSでは対応してないです。
https://caniuse.com/mdn-css_properties_background-attachment_fixed

[Ryoma2001]

background-attachment: fixed;
こちらが対応していないということでしょうか？
何か対処法を教えていただけたら助かります。自分でも調べてみますがよろしくお願いいたします。

[Lhankor_Mhy]

一応、動くみたいなんですが、background-size: coverと組み合わせると上手く動作しない、ということはiOS12のころに確認しました。iOS14では、私は自分の目では確認していないです。

[Ryoma2001]

対処法はなさそうですかね…

[Lhankor_Mhy]

「ios fixed cover」でググるといろいろ出てきますよ。

[Ryoma2001]

ググってみます

Answer 1

いちおう関係ありそうなリンク。

スマートフォンで画像がぼやける問題の簡単な対処法　Retina対応しよう！ | 独学でWebデザインまとめんばーず ｜Webクリオンライン

【初心者でもわかる】imgの画像がぼやける理由と対策 - Qiita

Comments

[Ryoma2001]

ありがとうございます。
こちらの対策もしたのですが、ダメでした。