Pf V6 Background Image
A background image allows you to place a decorative image in the
background of your page or area of a page. Use this when you want to
provide a branded backdrop. The element SHOULD be placed as a direct
child of <body>. Users MUST set src to display an image. This
element SHOULD NOT contain interactive content. It is hidden from
screen readers via aria-hidden for WCAG compliance.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-v6-background-image/pf-v6-background-image.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
View HTML Source
<pf-v6-background-image src="/components/pf-v6-background-image/demo/pf-background.svg"></pf-v6-background-image>
View the full screen demo.
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<pf-v6-background-image src="/components/pf-v6-background-image/demo/pf-background.svg"></pf-v6-background-image>
Attributes
src-
URL or file path of the background image
- DOM Property
src- Type
-
string - Default
-
unknown
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-background-image--BackgroundColor |
Background color shown behind or instead of the image |
var(--pf-t--global--background--color--primary--default, #292929)
|
--pf-t--global--background--color--primary--default |
#292929
|
|
--pf-v6-c-background-image--BackgroundImage |
Background image URL, automatically set via the |
none
|
--pf-v6-c-background-image--BackgroundSize |
Computed background size using clamp() for responsive scaling |
clamp(
/** Minimum width for responsive background sizing */
var(--pf-v6-c-background-image--BackgroundSize--min-width, 200px),
/** Responsive width percentage for background sizing */
var(--pf-v6-c-background-image--BackgroundSize--width, 60%),
/** Maximum width for responsive background sizing */
var(--pf-v6-c-background-image--BackgroundSize--max-width, 600px)
)
|
--pf-v6-c-background-image--BackgroundSize--min-width |
Minimum width for responsive background sizing |
200px
|
--pf-v6-c-background-image--BackgroundSize--width |
Responsive width percentage for background sizing |
60%
|
--pf-v6-c-background-image--BackgroundSize--max-width |
Maximum width for responsive background sizing |
600px
|
--pf-v6-c-background-image--BackgroundPosition |
Position of the background image within the viewport |
bottom left
|
