コンテンツの背後に色や写真を置く.

ページの帯にブランドカラーや写真を敷き、見出しを目立たせて帯を1つのブロックとして見せます。色と写真は、任意のエレメントのStyleパネルで設定します。SectionにはBackground effectsパネルが付き、固定写真、パララックス、グラデーション、YouTube動画を設定できます。

動画では以下の手順どおりに、見出しの背後に写真を置き、その上に濃いグラデーションを重ねて、白い見出しを読みやすくしています。

始める前に

• ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
• Save（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにあるSaveでページを保存し、「Saved field」と表示されます。
• Sectionをページの帯全体に使います。Background effectsがあるのはSectionのみです。
• TextやCardエレメントをカラム内の数行の背後にある色付きボックスに使います。
• テーマをページ本文やフッターなど全ページ共通の背景に使います。
• 写真の中に文字を入れません。 背景画像にaltテキストはなく、スクリーンリーダーが飛ばします。メッセージは上の見出しに入れます。

手順：写真の上の読みやすい見出し

ごちゃごちゃした写真の上の白いテキストは読みにくくなります。写真の上に濃いグラデーションを重ねれば解決し、写真を差し替えても有効です。Textエレメントの見出しを持つSectionが必要です。

1. ページ上でSectionにカーソルを合わせ、More、Settingsの順にクリックします。
2. 次にStyleパネルを開き、Background imageにあるSelect Imageをクリックします。写真を選びます。サムネイルと画像サイズ一覧が表示されます。
3. 画像サイズ一覧で、デザイン対象の最も広い画面以上の幅を選びます。またはOriginal image (No resizing)を選びます。帯全体にはOptimize for fast loadingを避けます。
4. 設定はBackground styleをCoverに、Background positionをCenter centerにします。
5. 次にBackground effectsパネルを開き、Background effectをGradientにします。写真はそのままで、グラデーションが上に重なります。
6. 色フィールドはStart colorにrgba(0, 0, 0, 0.6)（60%の黒）と入力します。rgba(0, 0, 0, 0.3)をEnd colorに入力します。Gradient directionは180のままにし、ベールが上から下に掛かるようにします。
7. ダイアログのSaveをクリックします。セクションに濃いベール下の写真が表示されます。
8. ページ上でTextエレメントにカーソルを合わせ、More、Settingsの順にクリックします。StyleパネルでFont colorを白色にしてSaveをクリックします。
9. ツールバーのSaveをクリックします。

写真の最も明るい部分と見出しを突き合わせます。コントラストは4.5対1以上、大きな見出しは3対1以上を目安にします。目標値の説明はタイポグラフィのページをご覧ください。まだ読みにくい場合は、両方の値を上げます（例：0.8と0.5）。

表示内容

セクションには濃いベール下の写真が表示され、上部が最も濃く、白い見出しが上に載ります。Coverではセクション全体が埋まるため、狭い画面では写真の左右がより多く切り取られます。

設定の仕組み

色は画像の下にあります。画像の透明部分、Contain画像まわりの帯、写真読み込み中に見えます。写真の主な色調に近い色を選びます。

サイズOptimize for fast loadingでは、画像が最大幅1024 pxに縮小されWebPで保存されます。ボックスには適しますが、大画面の帯全体ではぼやけて見えます。

同じ画像はスマートフォンを含むすべての画面サイズで読み込まれます。Hover styleパネルには独自のBackgroundとBackground imageがあるため、ホバーでボックスの色を変えたり画像を差し替えたりできます。

セクションの背景効果

これらの効果にはSectionが必要です。Fixed imageとParallax imageはBackground imageの写真を動かすため、先に写真を設定します。

写真の上では、グラデーションは常に端から端まで掛かります。Start positionとEnd positionは、写真なしのグラデーションにのみ適用されます。

背景が表示されない場合

• 写真が細い帯で表示される。 背景は高さを足しません。セクションの高さはコンテンツとパディング分です。コンテンツを追加するか、Generalパネルで100% heightをオンにします。パディングの追加は背の高いセクションの作り方をご覧ください。
• 写真が繰り返すか隅だけ表示される。 Background styleがTheme defaultsです。Coverを選びます。
• 広い画面で写真がぼやける。 Optimize for fast loadingでは最大幅1024 pxになります。画像サイズ一覧でより広いサイズを選びます。
• 写真が真っ黒の背後に隠れる。 グラデーション色に透明度がありません。各値の末尾に1未満の数値を付けます（例：rgba(0, 0, 0, 0.6)）。
• 見出しが濃いままになっている。 TextエレメントのHTML classesにある色クラスか、!important付きのテーマルールが優先されています。チップを外すか、タイポグラフィをご覧ください。
• ページの再読み込み後に背景が消える。 Saveはダイアログではエディター内にのみ保持されます。ツールバーのSaveをクリックします。
• 色が出ない。 写真が覆っています。写真の上に色味を重ねるには、Background effectsのGradientを使います。
• Start positionとEnd positionを変えても変わらない。 セクションにBackground imageがあるため、グラデーションは端から端まで掛かります。代わりにGradient directionと透明色を使います。
• クラスの色が優先される。 HTML classesにあるPrimary backgroundのようなクラスがBackgroundに勝ちます。そのチップを外します。
• Circle counter、Progress bar、DividerではBackgroundが効かない。 これらのエレメントは独自の色を使います。GeneralパネルのBackground color、Back color、Colorを設定します。

次のステップ

• タイポグラフィ：写真上の見出し色を設定し、コントラストを確認します。