Examples
Props
BackgroundImage
| Name | Type | Default | Description |
|---|---|---|---|
| srcrequired | string | BackgroundImageSrcMap | Override image styles using a string or BackgroundImageSrc | |
| className | string | Additional classes added to the background. | |
| filter | React.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
