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

ウェブページのデザインをさらに高めるために、背景画像を追加して、全体のウェブサイトデザインに深みと視覚的な興味を加えることができます。

> !注コンポーネントに背景画像を追加する前に、開発者はこの機能をオンにする必要があります。コンポーネントのデータソースにテンプレートを追加することで、[コンポーネントの背景画像を許可](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/enable-adding-a-background-image-to-a-rendering.html) できます。機能が追加されると、コンポーネントのツールバーに「背景画像を割り当てる」アイコンが表示されます。

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

1.  コンポーネントのツールバーで「 **背景画像を割り当て**る」をクリックします。
    
2.  ダイアログボックスの **「データ** 」セクションの **背景画像** フィールドで、「 **ブラウズ** 」をクリックして画像を選択します。
    
3.  **ストレッチモード**フィールドで、背景画像の表示は以下の通りです:ストレッチモード、固定背景、パララックス、ストレッチ、縦方向に伸ばす、水平タイル、垂直にタイル、水平にタイル。
    
    デフォルトでは、画像の背景はフィットするように伸びます。
    
    ![Background image example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/sXA-background-image-example.PNG)
    

## 動画:コンポーネントに背景画像を10ステップで追加する

背景画像をコンポーネントに追加する方法のデモンストレーションとして、この動画を見ることができます。

:::youtube{id="MJPA5\_m3Iv0"}