OsirionBackgroundPattern

OsirionBackgroundPattern renders an empty, absolutely positioned div that fills its parent with a decorative pattern made of CSS gradients. Use it behind a hero or section; it has no content and needs no images or script.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* Each tile is a positioned container: the pattern layer fills it and the label sits above the layer *@
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem;">
    @foreach (var pattern in patterns)
    {
        <div style="position: relative; height: 8rem; border: 1px solid var(--osirion-border-color, #d1d5db); border-radius: 0.5rem; overflow: hidden;">
            <OsirionBackgroundPattern BackgroundPattern="pattern" />
            <div style="position: relative; z-index: 1; padding: 0.75rem;">
                <code>@pattern</code>
            </div>
        </div>
    }
</div>

@code {
    private static readonly BackgroundPatternType[] patterns =
    [
        BackgroundPatternType.Dots,
        BackgroundPatternType.Grid,
        BackgroundPatternType.Diagonal,
        BackgroundPatternType.Honeycomb
    ];
}

Most of the time you do not place it yourself: HeroSection, OsirionBaseSection and OsirionContentNotFound take a BackgroundPattern parameter and render it for you.

Usage

Through a section:

@using Osirion.Blazor.Components

<OsirionBaseSection Title="Categories" ShowPattern="true" BackgroundPattern="BackgroundPatternType.Grid">
    <p>Browse the documentation by topic.</p>
</OsirionBaseSection>

OsirionBaseSection draws the pattern only when ShowPattern is true (its default is false).

On its own, inside a positioned container, with the content raised above it:

<div style="position: relative;">
    <OsirionBackgroundPattern BackgroundPattern="BackgroundPatternType.Dots" />
    <div style="position: relative; z-index: 1;">
        <h2>Release notes</h2>
    </div>
</div>

The pattern layer has position: absolute; inset: 0; z-index: 0, so its parent needs a position other than static, and your content needs position: relative with a higher z-index to stay above it. The stylesheet's osirion-bg-content class is scoped to the component, so it does not apply to markup in your own pages; set those two properties yourself, as above.

Parameters

Style, Theme and unmatched attributes are not applied to the markup.

Patterns

TechWave and Circuit mix the theme color into a transparent one with color-mix(), so they follow the theme like the other patterns.

Under a dark theme (data-theme="dark" on the root or a parent; the stylesheet does not look for Bootstrap's data-bs-theme), every pattern except GradientMesh and TechWave is drawn as dots at 0.15 opacity, and GradientMesh is drawn at 0.15.

Behavior

• Rendering. Pure CSS; the same markup under static SSR and interactive rendering.
• Mask. With MaskImage the layer fades out toward its bottom edge.
• Accessibility. The layer is an empty div with no text, so assistive technology has nothing to announce. Keep enough contrast between your text and the pattern; the patterns use low opacity for that reason. With prefers-contrast: more the layer's opacity drops to 0.05.
• Motion. AnimatedGrid and TechWave animate continuously, and stop under prefers-reduced-motion: reduce, leaving a still pattern.

Styling

Patterns are drawn in --osirion-action-primary, so they follow the theme and the CSS framework adapter. Change the color for one area by setting the token on a parent:

.release-notes {
    --osirion-action-primary: #0e7490;
}

Related

• HeroSection
• OsirionBaseSection
• Layout overview