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.
srcunionOverride 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/[email protected])
--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/[email protected])
--pf-c-background-image--Filterc_background_image_Filterurl(#image_overlay)