Spotlightテーマで背景を画像にしたいのですが、表示されません。

[WorksDesign]

Spotlightテーマで背景を画像にしたいのですが、表示されません。

アセットにてcssを追加↓

body {
background-image: url("画像");
background-position: right;
background-repeat: no-repeat;
}

theme.liquidに読み込みcss追加↓

{{ 'bg.css' | asset_url | stylesheet_tag }}

追加したのはこれだけですが、何かと干渉しているのでしょうか。

どなたかご教示をお願いいたします。

[Qcoltd · Accepted solution]

興味があり調査してみました。

.gradientというCSS Classの方が優先度が高いため、

.gradientで指定されているbackgroundの記述で上書きされてしまっているものと思われます。

body.gradient {
background-image: url("画像");
background-position: right;
background-repeat: no-repeat;
}

このようにすることで、

背景画像が表示されるようになるかもしれません。

しかし、

どうやらページ内の各要素に背景色が設定してあり、

その背景色によって結局、bodyの背景画像が十分に表示されないかもしれません。

その場合は、

テーマのカスタマイズから下図の画面を開き、

赤枠で記した箇所の色指定を「なし」(入力されているものを空っぽにすることで「なし」になります)にすることで、bodyの背景画像が表示されるようになるはずです。

しかし、

この背景色を「なし」(透明)にすることで他の箇所の表示に不具合が出る可能性もあります。

そこまでは調査できておりません。

ご参考まで。

(キュー田辺)

[WorksDesign]

調査していただきありがとうございました。

背景画像が配置できました。

しかし、今度はテーマ設定の色の背景を透明にしたところ、アセットごとの背景がすべて黒くなってしまって困ってます。。

もし、解決策がありましたらお助けいただけませんでしょうか。。
何卒よろしくお願いいたします。

[Qcoltd]

@WorksDesign 様

返信遅くなりました。

「アセットごと」というのは何を意味されているでしょうか？

もし、よろしければ、サイトの状態を確認できるURLをプライベートメッセージでお送りいただいた方が早いかもしれません。

ご検討ください。

(キュー田辺)

[WorksDesign]

キュー田辺様

お世話になります。市川です。
おかげさまで、背景はつけることができました！ありがとうございました！

アセットごとというのは、各コンテンツのブロックのことで、pngで画像を貼っているのですが、テーマ設定で全体を透明にするとpng周りが黒くなってしまうのです。（仕方ないので、今は白背景にしています。）
コンテンツ部の画像に影響なく、きれいに背景を出す方法はないでしょうか。


以下、構築中のURLです。
田口電気 (d9ea8a-2.myshopify.com) <>

[image: Web キャプチャ_7-6-2023_184145_d9ea8a-2.myshopify.com.jpeg]

ちなみに、テーマはSpotlightから有料テーマのGalleriaになりました。
編集するコードファイルは大体わかるのですが、Shopify独自のカスタムCSSの使い方が全くわかりません。。 （エラーが出て反映されず。。）

何卒、ご教示のほどよろしくお願いいたします。