## 1.

**[Preview and Design](#preview)**



 

 

 

 

 

 



 

## 2.

[**How to create**](#creation)



 

 

 

 

 

 



 

## 3.

[**How to translate**](/site-configuration/edit-translations "Edit translations")



 

 

 

 

 

 



 

 

 





<a name="preview"></a>

---

## Preview

   ![](/sites/g/files/dvc2391/files/styles/default/public/image/2019/02/Screenshot%202019-02-12%20at%2016.56.02.png.webp?itok=GHDZSsMr)   



## Information architecture

This component is dedicated to bring additional level of layout for pages by adding the ability of using an image as a background behind usual components.

## Design

Container is designed in two parts. First for background setting, then Second with usual components choice and setting.

## Typical usage and example

To be used for: any page where enhanced graphic layout is needed. Resourcer stories for example

See an example on <https://www.veolia.com/en/careers/our-mission/resourcer-stories-Peter-Schockaert-Belgium>

<a name="creation"></a>

---

## How to create it

   ![](/sites/g/files/dvc2391/files/styles/default/public/image/2019/02/joxi_screenshot_1549987174251.png.webp?itok=UPIQx42T)   



| Field | Description |
|---|---|
| 1 - Admin title | Used only in the backoffice |
| 2 - Background color | Color behind background image: **white** or **grey** |
| 3 - Background image | Add image file |
| 4 - Background style | Choose alignment for background image (**top**, **center**, **bottom**) |
| 5 - Width | Choose spanning for background image (**standard** or **narrow**) |
| 6 - Content | Component available in the foreground |
| 6 - Add component | If needed, additonal components can be displayed  choice is restricted to **Accordion**, **Content with aside**, **Card**, **Grid**, **Quote**, **Text** and **Tabs** |