Background image

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

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--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