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

Basic

Props

BackgroundImage properties
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_BackgroundImage
url(assets/images/pfbg_576.jpg)
--pf-c-background-image--BackgroundImage-2xc_background_image_BackgroundImage_2x
url(assets/images/pfbg_576@2x.jpg)
--pf-c-background-image--BackgroundImage--lgc_background_image_BackgroundImage_lg
url(assets/images/pfbg_2000.jpg)
--pf-c-background-image--BackgroundImage--smc_background_image_BackgroundImage_sm
url(assets/images/pfbg_768.jpg)
--pf-c-background-image--BackgroundImage--sm-2xc_background_image_BackgroundImage_sm_2x
url(assets/images/pfbg_768@2x.jpg)
--pf-c-background-image--Filterc_background_image_Filter
url(#image_overlay)