Examples
Documentation
Overview
In order to set the background image to be used, set the --pf-v6-c-background-image--BackgroundImage CSS variable to the path of the image. For example: --pf-v6-c-background-image--BackgroundImage: url(custom/path/image.jpg);
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-background-image | * | A fixed background image is applied to the background of the page. |
--pf-v6-c-background-image--BackgroundImage | .pf-v6-c-background-image | Sets the background image to be used. Required |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-background-image) | --pf-v6-c-background-image--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-background-image) | --pf-v6-c-background-image--BackgroundImage | none | ||
| :where(:root, .pf-v6-c-background-image) | --pf-v6-c-background-image--BackgroundSize--min-width | 200px | ||
| :where(:root, .pf-v6-c-background-image) | --pf-v6-c-background-image--BackgroundSize--width | 60% | ||
| :where(:root, .pf-v6-c-background-image) | --pf-v6-c-background-image--BackgroundSize--max-width | 600px | ||
| :where(:root, .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 | ||
