Background image

A background image allows you to place an image in the background of your page or area 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-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