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.
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
| Parameter | Type | Default | Description |
|---|---|---|---|
BackgroundPattern |
BackgroundPatternType? |
null |
The pattern. When null, nothing is rendered. |
MaskImage |
bool |
true |
Adds osirion-bg-image-mask, a vertical gradient mask that fades the pattern out. |
Class |
string? |
null |
Extra CSS classes on the pattern div. |
Style, Theme and unmatched attributes are not applied to the markup.
Patterns
BackgroundPatternType |
CSS class | Look |
|---|---|---|
Dots |
osirion-bg-dots |
Dots on a 24 px grid. |
Grid |
osirion-bg-grid |
Thin lines on a 24 px grid. |
Diagonal |
osirion-bg-diagonal |
45 degree lines. |
Honeycomb |
osirion-bg-honeycomb |
Hexagon tiling. |
GradientMesh |
osirion-bg-gradient-mesh |
Blurred color glows in the corners. |
AnimatedGrid |
osirion-bg-grid-animated |
Grid with a slow pulse animation. |
TechWave |
osirion-bg-tech-wave |
Slowly rotating light overlay. |
Circuit |
osirion-bg-circuit |
Dots and short lines like a circuit board. |
DotsFade |
osirion-bg-dots-fade |
Dots that fade out toward the edges. |
TechWave and Circuit wrap the theme color in rgba(), which browsers reject when the token holds a color value
(the default tokens do), so these two currently show little or nothing. Prefer the other patterns.
Under a dark theme (data-theme="dark" on a parent), the stylesheet draws every pattern except GradientMesh and
TechWave as dots at 0.15 opacity.
Behavior
- Rendering. Pure CSS; the same markup under static SSR and interactive rendering.
- Accessibility. The layer is an empty
divwith no text, so assistive technology has nothing to announce. Keep enough contrast between your text and the pattern; the patterns use low opacity (0.15 to 0.2 for the line and dot patterns) for that reason. - Motion.
AnimatedGridandTechWaveanimate continuously, and the component's stylesheet has no reduced-motion rule of its own. Choose a static pattern where motion is a concern.
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
Related Articles
