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/elementsUsage
Sibling content w/ no filter
Sibling Content
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--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 |
—
|
|
--pf-c-background-image--Filter |
url("#image_overlay")
|
CSS Shadow Parts
None
