Background Attachment

vel-src: colors.css

Utilities for controlling how a background image behaves when scrolling.

Class	Properties
vel-bg-fixed	background-attachment: fixed
vel-bg-local	background-attachment: local
vel-bg-scroll	background-attachment: scroll

Examples

Background attachment values

vel-bg-fixed

vel-bg-scroll

example.html

<div style="padding:1rem;background:#060b17;">
  <!-- vel-bg-fixed: background stays fixed relative to the viewport -->
  <div class="vel-bg-fixed vel-bg-cover vel-bg-center" style="height:100px;border-radius:6px;border:1px solid #1e2d45;background-color:#7c5cfc;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.8rem;">vel-bg-fixed</div>

  <!-- vel-bg-scroll: background scrolls with the element -->
  <div class="vel-bg-scroll vel-bg-cover vel-bg-center" style="height:100px;border-radius:6px;border:1px solid #1e2d45;background-color:#38bdf8;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.8rem;">vel-bg-scroll</div>
</div>