Dawn10.0 セクションの背景設定について

日本語 ディスカッション 技術的なQ＆A
4

@YMD002

スマホでの見た目で、画像が拡大されているとの事ですが、それはPCのブラウザでメール登録部分を見ると、スクロールに応じて背景画像の位置がずれているかと思いますが。
こちらが原因でスマホで見た際、画像が拡大されているようです。

解決策としては2通り考えられます。

  1. スマホサイズでは、画像メール登録で表示されているエリアの背景に画像を設定する
  2. PCでスクロールに応じて背景がずれるのをやめ、1のスマホと同じ設定にする

CSSの設定で『background-size: cover;』『background-position: center;』と設定していますので、スマホの表示は解決策1,2とも画像の左右が切れて表示され、PCの表示は解決策2の場合は、上下が切れて表示されます。

解決策1用CSS

/* 共通 */
.newsletter__wrapper {
  height: 350px;
}
.newsletter__wrapper::after {
  background-image: url(ご自身の背景画像を記載ください);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* スマホ以外（主にPC） */
@media all and (min-width: 996px) {
  .newsletter__wrapper {
    background-image: url(ご自身の背景画像を記載ください);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;
  }
  .newsletter__wrapper::after {
    background-image: none;
  }
}

解決策2用CSS

/* 共通 */
.newsletter__wrapper {
  height: 350px;
}
.newsletter__wrapper::after {
  background-image: url(ご自身の背景画像を記載ください);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* スマホ以外（主にPC） */
@media all and (min-width: 996px) {
  .newsletter__wrapper {
    height: 450px;
  }
}

CSS内の『/* 共通 */』と『/* スマホ以外（主にPC） */』は補足のために入れていますので、削除いただいて問題ありません。

また、Google Chromeのデベロッパーツールはスマホの実機を完全に再現しているわけではございませんので、最終確認は実機ですることをお勧めします。

ご参考まで。
(キュー小坂)