PatternFly

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

In order to set the background image to be used, set the --pf-v5-c-background-image--BackgroundImage CSS variable to the path of the image. For example: --pf-v5-c-background-image--BackgroundImage: url(custom/path/image.jpg);

Usage

Class
Applied to
Outcome
.pf-v5-c-background-image
*
A fixed background image is applied to the background of the page.
--pf-v5-c-background-image--BackgroundImage
.pf-v5-c-background-image
Sets the background image to be used. Required

CSS variables

SelectorVariableValue
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundColor
#151515
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundImage
none
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundPosition
bottom right
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundSize--min-width
200px
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundSize--width
60%
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundSize--max-width
600px
.pf-v5-c-background-image--pf-v5-c-background-image--BackgroundSize
clamp(200px, 60%, 600px)

View source on GitHub