Skip to main content
JPN Web Design ships five CSS utility classes that overlay subtle, repeating Japanese pattern images onto any position: relative container. The patterns are defined in app/globals.css and are ready to use without any additional configuration.
Pattern elements are absolutely positioned overlays. The parent container must have position: relative (or a Tailwind relative class) and should have overflow: hidden to prevent the pattern from bleeding outside its bounds.

​
How patterns work

Each pattern class creates a full-bleed, pointer-event-free overlay inside its parent. The shared structure is:
  • position: absolute — fills the parent container
  • background-repeat: repeat — tiles the image across the full area
  • Low opacity — keeps the pattern subtle so content remains readable
  • pointer-events: none — the overlay never blocks clicks or interactions
To apply a pattern, add an empty <div> as the first child of your section: 
<section className="relative overflow-hidden py-32">
  <div className="pattern-bg-waves"></div>

  {/* Your section content here */}
  <div className="relative z-10">
    <h2>Section Title</h2>
  </div>
</section>
Wrap your content in a relative z-10 container so it renders above the pattern overlay. Without this, interactive elements may be obscured.

​
Available patterns

​
.pattern-bg — Asanoha (麻の葉)

Asanoha (麻の葉, asanoha) means “hemp leaf.” The pattern is a geometric star-shaped figure formed by overlapping hexagons, resembling the leaf of a hemp plant. It is one of the most common patterns in Japanese design and is traditionally associated with health, growth, and good luck. 
/* app/globals.css */
.pattern-bg {
  background-image: url("/images/patterns/patron-asanoha.avif");
  background-size: 200px;
  background-repeat: repeat;
  opacity: 0.03;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
This pattern is used in the Hero section (components/Hero.tsx).

​
.pattern-bg-waves — Seigaiha (青海波)

Seigaiha (青海波, seigaiha) means “blue ocean wave.” The pattern consists of overlapping circular scales arranged in rows, evoking the movement of waves on the sea. It is one of the oldest Japanese patterns, associated with protection and good fortune. 
/* app/globals.css */
.pattern-bg-waves {
  background-image: url("/images/patterns/patron-ondas-seigaiha.avif");
  background-size: 150px;
  background-repeat: repeat;
  opacity: 0.04;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
This pattern is used in the Skills section (components/Skills.tsx): 
<section id="skills" className="relative py-32 ...">
  <div className="pattern-bg-waves"></div>
  {/* ... */}
</section>

​
.pattern-bg-uroko — Uroko (鱗)

Uroko (鱗, uroko) means “fish scale” or “reptile scale.” The pattern is made of small, tessellating triangles that form a scale-like texture. In Japanese tradition it symbolizes protection from evil and is often found on samurai armor and kimonos. 
/* app/globals.css */
.pattern-bg-uroko {
  background-image: url("/images/patterns/patron-uroko.avif");
  background-size: 100px;
  background-repeat: repeat;
  opacity: 0.05;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
This pattern is used in the Works/Projects section (components/Works.tsx): 
<section id="projects" className="relative py-32 ...">
  <div className="pattern-bg-uroko"></div>
  {/* ... */}
</section>

​
.pattern-bg-kumo — Kumo (雲)

Kumo (雲, kumo) means “cloud.” The pattern reproduces the stylized, rounded clouds seen in traditional Japanese paintings and textile prints. Clouds in Japanese aesthetics are associated with change, impermanence, and the passage of time — a visual echo of the mono no aware philosophy. 
/* app/globals.css */
.pattern-bg-kumo {
  background-image: url("/images/patterns/kumo.avif");
  background-size: 250px;
  background-repeat: repeat;
  opacity: 0.06;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

​
.pattern-bg-hishi — Hishi (菱)

Hishi (菱, hishi) means “water chestnut” and refers to the diamond or rhombus shape. The pattern is a tessellation of diamond shapes that has been used in Japanese textile design for centuries, associated with strength and longevity. 
/* app/globals.css */
.pattern-bg-hishi {
  background-image: url("/images/patterns/hishi.avif");
  background-size: 250px;
  background-repeat: repeat;
  opacity: 0.06;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

​
Pattern comparison

ClassJapanese nameMeaningTile sizeOpacity
.pattern-bg麻の葉 AsanohaHemp leaf / hexagonal star200px0.03
.pattern-bg-waves青海波 SeigaihaOverlapping wave scales150px0.04
.pattern-bg-uroko鱗 UrokoFish / triangle scales100px0.05
.pattern-bg-kumo雲 KumoStylized clouds250px0.06
.pattern-bg-hishi菱 HishiDiamond / rhombus shapes250px0.06

​
Adjusting opacity and tile size

The opacity and background-size values in globals.css are the easiest knobs to turn. Increasing opacity makes the pattern more prominent; increasing background-size enlarges the individual tiles. 
.pattern-bg-waves {
  opacity: 0.02;
  background-size: 120px;
}
Keep opacity below 0.1 for decorative backgrounds. Values above this tend to compete visually with foreground content and reduce readability.

​
Full usage example

The following shows how to add the Kumo cloud pattern to a new custom section: 
export function AboutSection() {
  return (
    <section
      id="about"
      className="relative py-32 px-4 sm:px-6 lg:px-8 bg-background overflow-hidden"
    >
      {/* Pattern overlay — must be first child */}
      <div className="pattern-bg-kumo" />

      {/* Content sits above the pattern */}
      <div className="max-w-6xl mx-auto relative z-10">
        <h2 className="text-4xl font-bold text-foreground">About</h2>
        <p className="text-foreground/70 mt-4">
          Your bio goes here.
        </p>
      </div>
    </section>
  );
}

Personal Info

Update your name, experience, projects, and social links

Theming

Customize colors, fonts, and dark mode

Build docs developers (and LLMs) love

Get started for freeTalk to us