Background image

A background image is an image that fills the background of a page.

Examples

*required
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.

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--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #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--BackgroundSize clamp(--pf-v6-c-background-image--BackgroundSize--min-width, --pf-v6-c-background-image--BackgroundSize--width, --pf-v6-c-background-image--BackgroundSize--max-width) 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