HTML

Background image

ExamplesDocumentationCSS Variables

Examples

Basic

Documentation

Overview

This component puts an image on the background with an svg filter applied to it. The svg must be inline on the page for the filter to work in all browsers.

Usage

ClassApplied toOutcome
.pf-c-background-image*A fixed background image is applied to the background of the page.
.pf-c-background-image__filter*The inline svg that provides the filter for the background image.

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