Background attachment

Syntax

Class
Properties
bg-fixed
background-attachment: fixed;
bg-local
background-attachment: local;
bg-scroll
background-attachment: scroll;
<div class="t1 mb-16">Scroll using BOTH scrollbars to compare!</div> <div class="t1 w-256 h-256 mb-400 shadow-4 bg-cover bg-center bg-scroll overflow-auto" style="background-image: url(/assets/tree.jpg?o1-cache=1);"> <div class="t1 flex flex-col flex-center"> <div class="t1 w-16 h-16 rounded-full bg-c-white shadow-4-80 my-64"></div> <div class="t1 w-16 h-16 rounded-full bg-c-white shadow-4-80 my-64"></div> <div class="t1 w-16 h-16 rounded-full bg-c-white shadow-4-80 my-64"></div> <div class="t1 w-16 h-16 rounded-full bg-c-white shadow-4-80 my-64"></div> </div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Attach the background image to the viewport.
t1 bg-fixed
.t1.bg-fixed { background-attachment: fixed; }
Attach the background image to the elements contents. If scrolling is available, scroll with its contents.
t1 bg-local
.t1.bg-local { background-attachment: local; }
Attach the background image to the element itself. Scrolling its contents doesn't affect the position of the background image.
t1 bg-scroll
.t1.bg-scroll { background-attachment: scroll; }