Examples
Props
BackgroundImage
| Name | Type | Default | Description |
|---|---|---|---|
| srcrequired | string | The URL or file path of the image for the background | |
| className | string | Additional classes added to the background image. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundImage | none | ||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundSize--min-width | 200px | ||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundSize--width | 60% | ||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundSize--max-width | 600px | ||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundSize | clamp(200px, 60%, 600px) | ||
| ||||
| .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundPosition | bottom right | ||
| :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image | --pf-v6-c-background-image--BackgroundPosition | bottom left | ||