Background

Tiled texture layer

A decorative layer behind a page or a section: a tiled image, or the built-in hairline pattern. It is hidden from screen readers and never takes clicks.

Basic

pattern fallback

offset -40, opacity .4

<script setup lang="ts">
import { BlessBackground, BlessText } from "blessing-ui";
</script>

<template>
  <div class="row">
    <div class="boxed" style="position: relative; width: 260px; height: 120px">
      <BlessBackground />
      <BlessText as="p" style="position: relative">pattern fallback</BlessText>
    </div>
    <div class="boxed" style="position: relative; width: 260px; height: 120px">
      <BlessBackground :offset="-40" :opacity="0.4" />
      <BlessText as="p" style="position: relative">offset -40, opacity .4</BlessText>
    </div>
  </div>
</template>

• mode="fixed" pins it to the viewport (put it once, at page level); absolute (default) fills the nearest positioned parent.
• offset shifts the tile vertically, so neighbouring pages can use different parts of one image.
• Keep text over it readable: lower opacity rather than relying on the text colour.

Usage

import { BlessBackground } from "blessing-ui";

API

Props

Name	Type	Default	Description
src	string	—	tile image; omit for a built-in hairline pattern
offset	string | number	0	vertical tile offset (number = px). Source site used 0 / -300 / -600 per page
mode	"absolute" | "fixed"	"absolute"	fixed = viewport (use at page level); absolute = fills positioned parent
opacity	number	1