Examples
Documentation
Overview
In order to set the background image to be used, set the --pf-v5-c-background-image--BackgroundImage CSS variable to the path of the image. For example: --pf-v5-c-background-image--BackgroundImage: url(custom/path/image.jpg);
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-background-image | * | A fixed background image is applied to the background of the page. |
--pf-v5-c-background-image--BackgroundImage | .pf-v5-c-background-image | Sets the background image to be used. Required |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundColor | #151515 | ||
--pf-v5-c-background-image--BackgroundColor --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundImage | none | ||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundSize--min-width | 200px | ||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundSize--width | 60% | ||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundSize--max-width | 600px | ||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundSize | clamp(200px, 60%, 600px) | ||
--pf-v5-c-background-image--BackgroundSize clamp(--pf-v5-c-background-image--BackgroundSize--min-width, --pf-v5-c-background-image--BackgroundSize--width, --pf-v5-c-background-image--BackgroundSize--max-width) clamp(200px, 60%, 600px) | ||||
| .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundPosition | bottom right | ||
| :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image | --pf-v5-c-background-image--BackgroundPosition | bottom left | ||
View source on GitHub
