HTML Code
<!DOCTYPE html>
<html>
<head>
  <title>CSS background-attachment Comparison</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background: #f8fafc;
    }
    .intro {
      padding: 1.25rem 1.5rem;
      background: #eff6ff;
      border-bottom: 1px solid #bfdbfe;
      color: #1e3a8a;
    }
    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      padding: 1rem 1.5rem 2rem;
    }
    .panel {
      min-height: 220px;
      border-radius: 0.75rem;
      border: 2px solid rgba(15, 23, 42, 0.12);
      background-image:
        linear-gradient(180deg, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0.15)),
        repeating-linear-gradient(
          135deg,
          #1e3a8a 0 18px,
          #2563eb 18px 36px,
          #60a5fa 36px 54px,
          #1d4ed8 54px 72px
        );
      background-size: auto, 144px 144px;
      display: grid;
      place-items: start center;
      padding-top: 1rem;
      color: #fff;
      font-weight: 800;
      text-transform: uppercase;
    }
    .scroll { background-attachment: scroll, scroll; }
    .fixed { background-attachment: fixed, fixed; }
    .spacer {
      min-height: 120vh;
      padding: 1.5rem;
      background: #fff;
      color: #475569;
    }
    .local-section {
      padding: 1.5rem;
      background: #ecfdf5;
    }
    .local-box {
      max-width: 360px;
      max-height: 160px;
      overflow: auto;
      padding: 1rem;
      border-radius: 0.75rem;
      border: 1px solid #99f6e4;
      background-image: linear-gradient(180deg, #ccfbf1, #a7f3d0);
      background-attachment: local;
    }
    .local-box p { margin: 0 0 1rem; }
  </style>
</head>
<body>
  <div class="intro">
    <h1>Scroll the page</h1>
    <p>Watch the striped panels below. <strong>scroll</strong> keeps stripes aligned with the box. <strong>fixed</strong> keeps stripes pinned to the viewport.</p>
  </div>

  <div class="compare">
    <div class="panel scroll">scroll</div>
    <div class="panel fixed">fixed</div>
  </div>

  <div class="spacer">
    <p>Keep scrolling...</p>
    <p>The fixed panel's stripes stay locked to the browser window, while the scroll panel's stripes move with the element.</p>
  </div>

  <div class="local-section">
    <h2>local example</h2>
    <div class="local-box">
      <p>Line 1 — scroll inside this box only.</p>
      <p>Line 2 — background moves with inner content.</p>
      <p>Line 3 — useful for note panels.</p>
      <p>Line 4 — end of content.</p>
    </div>
  </div>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
CSS background-attachment Property - scroll vs fixed
