BG Image Class

This class adds a background image to your element. The image is added as a CSS background image on the ::before pseudo-element. This allows us to add filters, transforms and change the opacity without affecting the actual content of your element.

HINT
The image layout is a layout with this .bg-image and the .bg-overlay applied to it.
Similarly, the block component is a component with both classes applied.

Both are probably easier to use than to provide a custom element with CSS variables.

Variables

Name	Description	Default
--image	Background image (dont forget url())
--image-opacity	Opacity of the background image	1
--image-filter	CSS filter for the image
--image-transform	CSS transform for the image

CSS

/* Base Styling */
.bg-image {
    position: relative;

    &::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -2;

        background-image: var(--image);
        opacity: var(--image-opacity);
        filter: var(--image-filter);
        transform: var(--image-transform);
    }
}

/* Overridable Styling */
:where(.bg-image) {
    overflow: hidden;
    isolation: isolate;

    &::before {
        inset: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}