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

[YMD002]

Dawnテーマを使用しており、TOPページ内の「メール登録」部分の背景に画像を設定したいと思い、「テーマ編集」→「カスタムCSS」に下記のコードを記入しました。PCの場合、背景画像は問題なく表示されましたが、SPの場合は背景が真っ黒で何回試しても表示されませんでした。解決方法は分からなくて、ご存知の方教えていただけますか？

.newsletter__wrapper {
  background-image: url(https://cdn.shopify.com/s/files・・・・・（ここはアップロードした画像のURL）・・・・・・);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 450px;
}
@media all and (max-width: 995px) {
  .newsletter__wrapper {
    height: 350px;
  }
}

追記：

Google Chromeのデベロッパーツールを使って確認した時、どの端末も綺麗に表示されました。

実際携帯で確認してみると、背景画像が表示されず、真っ黒のままでした。

宜しくお願い致します。

[Qcoltd]

ご質問いただいている、トップページに追加した「メール登録」セクションの背景がSPで黒くなる件ですが、弊社環境で記載いただいているCSSをもとに、iPhoneのsafariで確認させていただきましたところ正常に表示していました。

実際の状況を確認できておりませんので可能性としてですが、下記状況が考えられますので、一度お確かめいただければと思います。

• ブラウザのキャッシュでカスタムCSSに追加したCSSが効いていない。
• 他のCSSが上書きしてしまっていて表示していない。
• 背景画像が拡大されすぎていて黒色の部分が表示されてしまっている。

明確な回答とならず恐縮ですが、ご参考まで。
(キュー小坂)

[YMD002]

キュー小坂さま

ご丁寧に説明して頂きありがとうございます。

こちらでテストした結果、背景画像のサイズが拡大されすぎたようです。

背景画像のサイズが拡大されすぎないように、何回かコードを修正して試してみましたが、うまく行けませんでした。大変申し訳ございませんが、どのようにコードを修正したらよろしいですか？（画像サイズは 2140 X 1050 px )

＊Google Chromeのデベロッパーツールを使って確認した時、どの端末も綺麗に表示されました。

よろしくお願い致します。

[Qcoltd · Accepted solution]

@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のデベロッパーツールはスマホの実機を完全に再現しているわけではございませんので、最終確認は実機ですることをお勧めします。

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

[YMD002]

キュー小坂様

お忙しい中、ご教示頂きありがとうございます。

PCでスクロールに応じて背景がずれる仕様を諦めました。ご丁寧に説明して頂きありがとうございます。

他の質問もご丁寧に教えて頂き、本当にありがとうございました。