Skip to content
Patternfly Logo

Background image

Examples

Basic

Props

BackgroundImage

*required
NameTypeDefaultDescription
srcrequiredstring | BackgroundImageSrcMapOverride image styles using a string or BackgroundImageSrc
classNamestringAdditional classes added to the background.
filterReact.ReactElement<filter> <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix> <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR> <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG> <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> </filter>Override svg filter to use

CSS variables

.pf-c-background-image--pf-c-background-image--BackgroundColor
#151515
.pf-c-background-image--pf-c-background-image--BackgroundImage
url("../../assets/images/pfbg_576.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage-2x
url("../../assets/images/pfbg_576@2x.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--sm
url("../../assets/images/pfbg_768.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--sm-2x
url("../../assets/images/pfbg_768@2x.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--lg
url("../../assets/images/pfbg_2000.jpg")
.pf-c-background-image--pf-c-background-image--Filter
url("#image_overlay")

View source on GitHub