Cascade FallsISSUE #14 of 33

backgrounds · attachment · clip · origin

StylaVSThe Specificity Sphinx

Styla saysbackground-attachment, background-clip, and background-origin fine-tune how a background sits in its box.

background-attachment: fixed pins the image to the viewport. background-clip: text clips the background to the shape of the text (gradient text!). background-origin decides whether the image starts at the border, padding, or content edge.

Power-ups you unlock

background-attachment: fixed pins to viewport
background-clip: text → gradient text effect
background-origin sets the image’s starting edge
These are the polish layer of backgrounds

The Specificity Sphinx attacks — common mistakes

fixed attachment causing jank on mobile
Forgetting -webkit-background-clip for text
Confusing clip with origin

Boss battleMake gradient text by setting a gradient background and background-clip:text with transparent color.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>h1{font-size:42px;background:linear-gradient(90deg,#b388ff,#8aff9d);-webkit-background-clip:text;background-clip:text;color:transparent}</style></head><body style="background:#06040d"><h1>gradient text</h1></body></html>

▶ Open the interactive comic issue

‹ Backgrounds · Position · Size · Repeat Borders · Width · Style · Color ›