Skip to content
PatternFly logo

Background image

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

Examples

Basic

Basic screenshot

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--pf-c-background-image--BackgroundColor
#151515
.pf-c-background-image--pf-c-background-image--BackgroundImage
url("../../assets/images/pfbg_576.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage-2x
url("../../assets/images/pfbg_576@2x.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--sm
url("../../assets/images/pfbg_768.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--sm-2x
url("../../assets/images/pfbg_768@2x.jpg")
.pf-c-background-image--pf-c-background-image--BackgroundImage--lg
url("../../assets/images/pfbg_2000.jpg")
.pf-c-background-image--pf-c-background-image--Filter
url("#image_overlay")

View source on GitHub