---
title: "コンポーネントに背景画像を追加してください"
slug: "add-a-background-image-to-a-component"
abstract: "ウェブページに背景画像を加えてデザインを引き立てましょう。"
---
# コンポーネントに背景画像を追加してください

> !注このトピックで説明されている手順はエクスペリエンスエディターを使用してください。

ページに背景画像を加えることで、ウェブページのデザインに深みや視覚的な興味を加えることができます。

> !注**始める前に**
> 
> -   [コンポーネントの背景画像を有効にすると、コンテンツエディターで](https://doc.sitecore.com/xp/en/developers/sxa/102/sitecore-experience-accelerator/en/enable-adding-a-background-image-to-a-rendering.html)\_Background Image
>     
> -   コンテナコンポーネント内に少なくとも1つのコンポーネントを追加してください。そうでなければ、背景画像はレンダリングされません。
>     

コンポーネントに背景画像を追加するには:

1.  コンテナコンポーネントをクリックしてください。
    
2.  フローティングツールバーで「 **コンポーネントのスタイルと動作を編集**する」をクリックしてください ![ee-style-icon.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/ee-style-icon.png)。
    
    ![SXA-headless-toolbar.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-toolbar.png)
    
3.  ダイアログボックスのス **タイリング** セクションで「 **ブラウズ** 」をクリックすると、メディアライブラリ内の画像を探します。
    
4.  画像を選択し、その後 **「選択」**をクリックします。
    
5.  利用可能なオプションを使って必要に応じて画像をスタイリングしてください。
    
6.  **OK**をクリックします。