blending-textured-backgrounds
Installation
SKILL.md
Blending Textured Backgrounds
Overview
Two adjacent full-bleed sections that each paint the same texture with
background-size: cover will still show a hard seam where they meet: each
section box has a different aspect ratio, so cover crops the image differently
in each. The textures don't register, and the join reads as a line.
Core principle: Don't make two cover-crops meet. Instead, paint the lower section's background on an absolutely-positioned layer that overlaps upward into the section above and is alpha-masked to fade in, so its texture crossfades over the section above rather than meeting it at an edge.
When to Use
- Adjacent sections share a textured/photographic/gradient background and a seam is visible at the boundary.
- You want a background to dissolve into the next section.