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

**URL:** <https://community.shopify.com/t/topic/291053>\
**Category:** Shopify テーマ\
**Created:** [January 31, 2024, 3:51pm UTC](https://community.shopify.com/t/topic/291053 "2024-01-31T15:51:25Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Shopifyでページ全体の背景に画像を設定し、その画像を固定（sticky）表示させたい相談。さらにヘッダーとフッターを半透明にして背景画像が透けて見えるデザインを実現したいとのこと。

**提案された解決策：**
- theme.liquidにコードを追加
- style.cssに背景画像とstickyのCSSを追加
- ヘッダー・フッターの透過にはRGBA形式のCSSを使用（例：`background-color: rgba(255,255,255,0.5)`）

**現在の課題：**
質問者はCSSとHTMLは理解しているが、Liquidファイルの経験が少なく、theme.liquidのどこにコードを配置すべきか、またstyle.cssファイルの正確な場所がわからず困っている状態。カスタムCSSへの配置方法についても追加の説明を求めている。

レスポンシブデザイン対応の可否についても質問があるが、まだ回答待ち。

<div class="post-metadata">

**Author:** ![kiyo25](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kiyo25](https://community.shopify.com/u/kiyo25)\
**Post date:** [January 31, 2024, 3:51pm UTC](https://community.shopify.com/t/topic/291053/1 "2024-01-31T15:51:25Z")

</div>

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

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

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

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

[https://125naroom.com/web/3434](https://125naroom.com/web/3434)

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 16, 2024, 6:12am UTC](https://community.shopify.com/t/topic/291053/2 "2024-02-16T06:12:25Z")

</div>

Kiyo25様

質問拝見いたしました。

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

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

```markup

```

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

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

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

```

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

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

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

---

<div class="post-metadata">

**Author:** ![kiyo25](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kiyo25](https://community.shopify.com/u/kiyo25)\
**Post date:** [February 16, 2024, 5:18pm UTC](https://community.shopify.com/t/topic/291053/3 "2024-02-16T17:18:23Z")

</div>

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

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

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

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