Spotlightテーマで背景画像を設定しようとしたが表示されない問題について相談。
原因と解決:
.gradient CSSクラスの優先度が高く、body要素の背景設定が上書きされていたbody.gradient セレクタを使用することで背景画像の表示に成功新たな問題:
現状:
ShopifyカスタムCSSの使い方に不慣れなため、さらなるアドバイスを求めている段階。構築中のサイトURLも共有されている。
Spotlightテーマで背景を画像にしたいのですが、表示されません。
アセットにてcssを追加↓
body {
background-image: url(“画像”);
background-position: right;
background-repeat: no-repeat;
}
theme.liquidに読み込みcss追加↓
{{ ‘bg.css’ | asset_url | stylesheet_tag }}
追加したのはこれだけですが、何かと干渉しているのでしょうか。
どなたかご教示をお願いいたします。
興味があり調査してみました。
.gradientというCSS Classの方が優先度が高いため、
.gradientで指定されているbackgroundの記述で上書きされてしまっているものと思われます。
body.gradient {
background-image: url("画像");
background-position: right;
background-repeat: no-repeat;
}
このようにすることで、
背景画像が表示されるようになるかもしれません。
しかし、
どうやらページ内の各要素に背景色が設定してあり、
その背景色によって結局、bodyの背景画像が十分に表示されないかもしれません。
その場合は、
テーマのカスタマイズから下図の画面を開き、
赤枠で記した箇所の色指定を「なし」(入力されているものを空っぽにすることで「なし」になります)にすることで、bodyの背景画像が表示されるようになるはずです。
しかし、
この背景色を「なし」(透明)にすることで他の箇所の表示に不具合が出る可能性もあります。
そこまでは調査できておりません。
ご参考まで。
(キュー田辺)
調査していただきありがとうございました。
背景画像が配置できました。
しかし、今度はテーマ設定の色の背景を透明にしたところ、アセットごとの背景がすべて黒くなってしまって困ってます。。
もし、解決策がありましたらお助けいただけませんでしょうか。。
何卒よろしくお願いいたします。
返信遅くなりました。
「アセットごと」というのは何を意味されているでしょうか？
もし、よろしければ、サイトの状態を確認できるURLをプライベートメッセージでお送りいただいた方が早いかもしれません。
ご検討ください。
(キュー田辺)
キュー田辺様
お世話になります。市川です。
おかげさまで、背景はつけることができました！ありがとうございました！
アセットごとというのは、各コンテンツのブロックのことで、pngで画像を貼っているのですが、テーマ設定で全体を透明にするとpng周りが黒くなってしまうのです。（仕方ないので、今は白背景にしています。）
コンテンツ部の画像に影響なく、きれいに背景を出す方法はないでしょうか。
以下、構築中のURLです。
田口電気 (d9ea8a-2.myshopify.com) <>
[image: Web キャプチャ_7-6-2023_184145_d9ea8a-2.myshopify.com.jpeg]
ちなみに、テーマはSpotlightから有料テーマのGalleriaになりました。
編集するコードファイルは大体わかるのですが、Shopify独自のカスタムCSSの使い方が全くわかりません。。 （エラーが出て反映されず。。）
何卒、ご教示のほどよろしくお願いいたします。
