Background image
A background image allows you to place an image in the background of your page or area of a page.
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Additional classes added to the background. | |
| filter | React.ReactElement | No | <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 |
| src | string | BackgroundImageSrcMap | Yes | Override image styles using a string or BackgroundImageSrc |
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") | ||
