Examples
Basic
A fixed background-image rendered behind overlay content. The component itself is a positioned div with the image set via CSS variable; the example wraps it in a clipped container so we can show the background and overlay side-by-side.
Documentation
Background image props
Parameters accepted by
{#include components/feedback/background-image ... /}. Model mode: pass
backgroundImage=<BackgroundImage> built in Java instead — the Java tab on each
example shows the builder.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — |
DOM id on the background <div>.
|
* src
|
String (URL) | — |
Image URL. Dropped into
--pf-v6-c-background-image--BackgroundImage: url(...)
as an inline style override.
|
Divergence from PF React. We skip className (React-specific). PF v6's
CSS variables (--BackgroundColor, --BackgroundSize,
--BackgroundPosition) aren't exposed as Qute params — set them via additional inline
style if you need custom sizing or positioning. The default PF v6 token values cover the common login-backdrop case.
Usage
Wrapper sets the bounds. The component itself is a positioned
<div> that fills its containing block — it doesn't lay out its own clipping. Put
it inside a positioned wrapper (e.g. position: relative on the page-level container)
with overflow handled by the wrapper.
Overlay content via z-index. Sibling content stacks above the background by default since the
background div has no z-index. If you reorder the children or use nested positioning,
add an explicit z-index: 1 on the overlay to be safe.
Custom sizing / positioning. Override the PF v6 CSS variables on the component element if you need
a different size or position than the defaults (--pf-v6-c-background-image--BackgroundPosition: center center, etc.).
Where this gets used. The default consumer is
components/forms/login-page — the login page renders its background image as a fixed
layer behind the form panel.