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

[kiyo25]

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

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

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

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

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

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

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

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

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

[株式会社フルバランス]

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ボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

[kiyo25]

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

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

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

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