Background image

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

Examples

Basic

Basic screenshot

Props

BackgroundImage

*required
NameTypeDefaultDescription
srcrequiredstringThe URL or file path of the image for the background
classNamestringAdditional classes added to the background image.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-background-image--pf-v6-c-background-image--BackgroundColor
(In light theme) #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--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
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.