Background

Background utilities let you control how images, gradients, textures, overlays, and decorative assets are rendered inside an element.

Use them for hero sections, media cards, marketing blocks, watermark layers, gradient text, texture backgrounds, and image overlays without writing custom CSS for every layout.

All background utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	CSS value	Common use
`bg-preset-cover`	`cover · no-repeat · center`	Hero sections, media panels, full-width backgrounds.
`bg-cover`	`background-size: cover`	Fill the container while preserving aspect ratio.
`bg-contain`	`background-size: contain`	Logos, icons, and illustrations that must remain fully visible.
`bg-center`	`background-position: center`	Default position for most image backgrounds.
`bg-no-repeat`	`background-repeat: no-repeat`	Prevent tiling on single images.
`bg-fixed`	`background-attachment: fixed`	Parallax-style fixed backgrounds on scroll.
`bg-clip-text`	`background-clip: text; color: transparent`	Gradient-filled text effects.
`bg-blend-overlay`	`background-blend-mode: overlay`	Tinted image overlays with readable text.

Usage

bg-preset-cover is the recommended shortcut for most full-width image backgrounds. It combines cover, no-repeat, and center in a single class.

<section
  class="bg-preset-cover"
  style="background-image: url('/images/hero.jpg'); min-height: 420px;"
>
  <div class="container">
    <h1>Build interfaces faster with FrontAlign</h1>
  </div>
</section>

Cover hero

Use bg-cover when the image should fill the entire section while preserving its aspect ratio.

<section
  class="bg-cover bg-center bg-no-repeat"
  style="background-image: url('/images/dashboard.jpg'); min-height: 520px;"
>
  <div class="container">
    <h1>One engine. Every interface.</h1>
  </div>
</section>

Contained illustration

Use bg-contain when the whole image must remain visible.

<div
  class="bg-contain bg-center bg-no-repeat"
  style="background-image: url('/images/illustration.svg'); min-height: 280px;"
></div>

Full stretch background

Use bg-full only when the background is designed to stretch exactly to the element size.

<div
  class="bg-full bg-no-repeat"
  style="background-image: url('/images/panel-texture.svg'); min-height: 220px;"
></div>

Decorative watermark

Apply a position utility to anchor a decorative asset to a specific corner.

<section
  class="bg-right-bottom bg-no-repeat"
  style="background-image: url('/images/fa-watermark.svg');"
>
  <div class="container">
    <h2>Runtime intelligence built in.</h2>
    <p>Use background utilities for subtle brand details and visual depth.</p>
  </div>
</section>

Pattern background

Use bg-repeat to tile a texture or pattern across an element.

<div
  class="bg-repeat"
  style="background-image: url('/images/pattern-dot.svg'); min-height: 260px;"
></div>

Fixed background section

Apply bg-fixed to create a parallax-style effect where the background stays in place while content scrolls.

<section
  class="bg-cover bg-center bg-fixed bg-no-repeat"
  style="background-image: url('/images/hero.jpg'); min-height: 100vh;"
>
  <div class="container">
    <h1>Premium landing section</h1>
  </div>
</section>

Gradient text

Use bg-clip-text to render gradient-filled text.

<h1
  class="bg-clip-text"
  style="background-image: linear-gradient(90deg, #2563eb, #60a5fa);"
>
  FrontAlign Engine
</h1>

Tinted image overlay

Use bg-blend-overlay to layer a colour gradient over a photograph so text remains readable.

<section
  class="bg-preset-cover bg-blend-overlay"
  style="
    background-image:
      linear-gradient(rgba(37, 99, 235, .68), rgba(15, 23, 42, .84)),
      url('/images/interface.jpg');
    min-height: 520px;
  "
>
  <div class="container">
    <h1>System-level UI architecture</h1>
  </div>
</section>

Removing a background image

Use bg-none to remove a background image from an element.

<div class="bg-none">
  Background image removed.
</div>

Real-world examples

Marketing hero

<section
  class="bg-preset-cover"
  style="background-image: url('/images/launch.jpg'); min-height: 560px;"
>
  <div class="container">
    <p>FrontAlign UI Engine</p>
    <h1>Build with utilities. Ship with components.</h1>
  </div>
</section>

Media card

<article>
  <div
    class="bg-preset-cover"
    style="background-image: url('/images/article-cover.jpg'); min-height: 240px;"
  ></div>

  <h3>Design systems that scale</h3>
  <p>Create consistent layouts with lightweight utilities.</p>
</article>

Darkened image card

<div
  class="bg-preset-cover bg-blend-darken"
  style="
    background-color: rgba(0, 0, 0, .45);
    background-image: url('/images/card.jpg');
    min-height: 320px;
  "
>
  <h3>Readable content over imagery</h3>
</div>

Patterned section

<section
  class="bg-repeat"
  style="background-image: url('/images/pattern.svg');"
>
  <div class="container">
    <h2>Reusable design language</h2>
  </div>
</section>

Gradient headline

<h2
  class="bg-clip-text"
  style="background-image: linear-gradient(90deg, #0f172a, #2563eb, #60a5fa);"
>
  Runtime-powered design system
</h2>

Scrollable content background

<div
  class="bg-local bg-repeat"
  style="background-image: url('/images/grid.svg'); max-height: 320px; overflow: auto;"
>
  <p>Long scrollable content...</p>
  <p>Long scrollable content...</p>
  <p>Long scrollable content...</p>
</div>

Choosing the right utility

Use case	Recommended utility
Full-width hero image	`bg-preset-cover`
Image fills container, aspect ratio preserved	`bg-cover`
Entire image must stay visible	`bg-contain`
Repeating texture or pattern	`bg-repeat`
Parallax scroll effect	`bg-fixed`
Text readable over image	`bg-blend-overlay` or `bg-blend-darken`
Gradient-filled text	`bg-clip-text`
Remove background image	`bg-none`

Accessibility notes

Background utilities are visual helpers. They should not be the only way to communicate meaning or content.

Never place critical text content inside a background image. Screen readers cannot access content embedded in images. Use HTML text on top of the background instead.

<section
  class="bg-preset-cover"
  style="background-image: url('/images/hero.jpg'); min-height: 480px;"
  role="img"
  aria-label="Team working in a modern office"
>
  <div class="container">
    <h1>Join our team</h1>
  </div>
</section>

When using bg-blend-* or gradient overlays to keep text readable, always verify colour contrast ratios meet WCAG AA standards.

<section
  class="bg-preset-cover bg-blend-overlay"
  style="
    background-image:
      linear-gradient(rgba(15, 23, 42, .75), rgba(15, 23, 42, .75)),
      url('/images/hero.jpg');
    min-height: 480px;
  "
>
  <div class="container">
    <h1 style="color: #ffffff;">High-contrast headline</h1>
  </div>
</section>

Usage notes

Use bg-preset-cover for most hero sections and media panels.
Use bg-cover when the image should fill the entire area and bg-contain for logos, icons, and diagrams that must remain fully visible.
Pair image backgrounds with bg-no-repeat unless you intentionally need a pattern.
Use bg-fixed carefully on mobile because fixed backgrounds can behave inconsistently across browsers.
Use bg-blend-* utilities when text must remain readable over imagery.
Use bg-clip-text for controlled gradient text effects, not for long paragraphs.
Combine background utilities with bg-center, bg-no-repeat, and min-height for complete section layout.