HTML

Background image

ExamplesDocumentationCSS Variables

Examples

Background image example

This Preview can only be accessed in full page mode.
Copied to clipboard

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

Class Applied To Outcome
.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_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)