React

Background image

A background image allows you to place an image in the background of your page or area of a page.

ExamplesPropsCSS Variables

Examples

Simple background image

Popout Example
Copied to clipboard

Props

BackgroundImage Props

The BackgroundImage component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the background.
srcstring | BackgroundImageSrcMapOverride image styles using a string or BackgroundImageSrc

CSS Variables

--pf-c-background-image--BackgroundColorc_background_image_BackgroundColor#151515
--pf-c-background-image--BackgroundImagec_background_image_BackgroundImageurl(assets/images/pfbg_576.jpg)
--pf-c-background-image--BackgroundImage-2xc_background_image_BackgroundImage_2xurl(assets/images/pfbg_576@2x.jpg)
--pf-c-background-image--BackgroundImage--lgc_background_image_BackgroundImage_lgurl(assets/images/pfbg_2000.jpg)
--pf-c-background-image--BackgroundImage--smc_background_image_BackgroundImage_smurl(assets/images/pfbg_768.jpg)
--pf-c-background-image--BackgroundImage--sm-2xc_background_image_BackgroundImage_sm_2xurl(assets/images/pfbg_768@2x.jpg)
--pf-c-background-image--Filterc_background_image_Filterurl(#image_overlay)