Skip to content
Versions v3 v2 v1

Background Image

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

Overview

View HTML Source
<pf-background-image filter
    src="/components/background-image/demo/pfbg.jpg"
    src-2x="/components/background-image/demo/pfbg_576.jpg"
    src-sm="/components/background-image/demo/pfbg_768.jpg"
    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
    src-lg="/components/background-image/demo/pfbg_1200.jpg"
></pf-background-image>

View the full screen demo.

Installation

npm install @patternfly/elements

Usage

Sibling content w/ no filter

Sibling Content

Button
View HTML Source
<pf-background-image 
    src="/components/background-image/demo/pfbg.jpg"
    src-2x="/components/background-image/demo/pfbg_576.jpg"
    src-sm="/components/background-image/demo/pfbg_768.jpg"
    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
    src-lg="/components/background-image/demo/pfbg_1200.jpg"
></pf-background-image>
<p>Sibling Content</p>
<pf-button>Button</pf-button>

View the full screen demo.

Override SVG Filter

MDN documentation for <filter>

View HTML Source
<pf-background-image filter
    src="/components/background-image/demo/pfbg.jpg"
    src-2x="/components/background-image/demo/pfbg_576.jpg"
    src-sm="/components/background-image/demo/pfbg_768.jpg"
    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
    src-lg="/components/background-image/demo/pfbg_1200.jpg" >
  <svg slot="filter" xmlns="http://www.w3.org/2000/svg">
    <filter id="image_overlay">
<feMorphology in="SourceGraphic" operator="dilate" radius="5"></feMorphology>
    </filter>
  </svg>
</pf-background-image>

View the full screen demo.

Slots

filter

Overrides the default svg filter for the background image.

Attributes

src

The URL for the image shown on mobile

DOM Property
src
Type
string | undefined
Default
unknown
src-2x

The image shown on mobile with 2x DPI

DOM Property
src2x
Type
string | undefined
Default
unknown
src-sm

The URL for the image shown on small screens (min-width: 576px)

DOM Property
srcSm
Type
string | undefined
Default
unknown
src-sm-2x

The URL for the image shown on small screens (min-width: 576px) with 2x DPI

DOM Property
srcSm2x
Type
string | undefined
Default
unknown
src-lg

The URL for the image shown on large screens (min-width: 992px)

DOM Property
srcLg
Type
string | undefined
Default
unknown
filter

Apply SVG Filter to the image

DOM Property
filter
Type
boolean
Default
false

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-background-image--BackgroundColor #151515
--pf-c-background-image--Filter url("#image_overlay")
--pf-c-background-image--BackgroundImage
--pf-c-background-image--BackgroundImage-2x
--pf-c-background-image--BackgroundImage--sm
--pf-c-background-image--BackgroundImage--sm-2x
--pf-c-background-image--BackgroundImage--lg

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify