FROM CACHE - jp_header

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

解決済

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

WorksDesign
Shopify Partner
8 0 0

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

アセットにてcssを追加↓

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

 

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

 

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

 

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

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1059 435 427

成功

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

 

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

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

 

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

 

このようにすることで、

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

 

しかし、

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

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

 

その場合は、

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

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

screenshot_20230605_01.png

 

しかし、

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

4件の返信4

Qcoltd
Shopify Partner
1059 435 427

成功

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

 

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

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

 

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

 

このようにすることで、

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

 

しかし、

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

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

 

その場合は、

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

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

screenshot_20230605_01.png

 

しかし、

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
WorksDesign
Shopify Partner
8 0 0

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

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

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

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

Qcoltd
Shopify Partner
1059 435 427

@WorksDesign 様

 

返信遅くなりました。

 

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

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

 

ご検討ください。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
WorksDesign
Shopify Partner
8 0 0
キュー田辺様

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

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


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

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

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

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