fixed-attachment-cta

Summary

Mid-page CTA section: fixed-attachment background photo, a teal gradient overlay on top, white kicker + serif headline + paragraph, and a solid amber "Consult Now" button. The fixed background gives a subtle parallax effect when the user scrolls.

HTML structure (minimal)

<div class="section position-relative bg-attach-fixed"
     style="background-image: url(image/cta.jpg);">
  <div class="bg-overlay"></div>
  <div class="r-container position-relative py-5" style="z-index: 2;">
    <div class="d-flex flex-column mx-auto text-center text-white gap-4" style="max-width: 700px;">
      <h6 class="accent-color-2">Facing legal challenges?</h6>
      <h3 class="font-1 text-white">Request a Confidential Case Evaluation</h3>
      <p>Time is critical in legal matters. Call us now…</p>
      <a href="contact.html" class="btn btn-accent px-4 py-3 rounded-0">Consult Now</a>
    </div>
  </div>
</div>

Key SCSS tokens

.bg-attach-fixed { background-attachment: fixed; }

.bg-overlay {
  background: linear-gradient(180deg, rgba(4,56,63,0.3) -29.83%, #04383F 100%);
  position: absolute; inset: 0;
}

Notable details

• A pure CSS parallax — background-attachment: fixed plus background-size: cover is enough to lock the photo while the page scrolls past it.
• Same overlay class (.bg-overlay) and the same teal gradient as the hero, so the visual rhythm of "photo → teal gradient → white text" repeats and feels unified.
• No animation library required — drops perfectly into low-JS sites.

Use when

• Mid-page CTAs in low-animation sites where you still want a moment of visual energy.
• Any time a page needs to break up two whitespace-heavy sections with a photographic interlude.

Caveats

• background-attachment: fixed is ignored on iOS Safari — the photo will scroll like a normal background. If you need real parallax everywhere, swap for a JS solution (Lenis + ScrollTrigger or a CSS-only position: sticky trick).
• Performance: fixed backgrounds force repaints on scroll on weaker mobiles; budget accordingly.