FROM CACHE - jp_header

画面の背景を1枚の画像にして、ヘッダーやフッターを半透明にする方法を教えてください。

kiyo25
訪問者
3 0 0

shopifyでページを作成していますが、下記の問題で困っています。

 

背景を画像にする方法がわからない(セクションの背景ではありません)

 

画面サイズに合わせた画像は背景にして、画像はstickeyで固定にしたいです。

Stickeyのイメージは、こちらで説明しているものをイメージしています。

https://125naroom.com/web/3434

またこれが可能な場合は、レスポンシブデザインに対応できるでしょうか?

 

そしてHeaderやFooterを半分透かして背景画像が淡く見える形にしたいのですが、可能でしょうか?

 

CSSはそれなりにわかるのですが、liquidは全くわかりません。

 

以上、教えていただけると助かります。

 

 

2件の返信2

株式会社フルバランス
Shopify Partner
1398 490 627
Kiyo25様

質問拝見いたしました。

背景画像を設定するには、以下の手順で設定することができます。

①theme.liquidに下記のコードを追加

 

<div class="bg"></div>

 

②style.cssに参考サイトのCSSを追加

また、ヘッダーやフッターの透過については、下記のようなCSSを使うことで透過した背景色を設定することができます。

 

header, footer{
  background-color: rgba(255, 255, 255, 0.5); /* 0.5 が透過率 */
}

 

CSSのタグについては、適宜変更していただければと思います。
以上、ご参考になれば幸いです。


私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。


分からない点があれば、またいつでもご連絡ください。
株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
kiyo25
訪問者
3 0 0

返信ありがとうございます。

CSSやHTMLはわかるのですが、liquidを使っているため、①theme.liquidのどこに配置していいかわかりません。

②については、style.cssの位置がわからないです。これはカスタムCSSに配置すればよいのでしょうか。

質問で返してしまって申し訳ないのですが、教えていただけると大変助かります。