Consider background-attachment: fixed() to enable attaching to more than the viewport [css-background]

[argyleink]

Upon trying to emulate an effect I saw on a set top box, I found that CSS didn't have a good way to accomplish the task.

https://codepen.io/argyleink/pen/MWxqJrr

Current with fixed, gradient is fit to the viewport:

Desired (emulated poorly with background-size), gradient is fit to the scrollport:

The last item should be orange in the horizontal list.

The problem in that demo in the gradient isn't spanning the entire width of the horizontal scroller, rather the viewport. The desired effect is the gradient spans the width of the scroller and thus has a gradient shared amongst the cards that goes from the inline-start of the scrollport to the inline-end.

CSS background-attachment: fixed is "fixed with regard to the viewport" (spec). This issue wants to articulate the desire to fix the background attachment to scrollports (or even open up the opportunity for more than scrollports, but potentially any element).

A strawman proposal for this is to enhance the fixed keyword into a function fixed() allowing authors to specify the containing bounds for the fixed background effect.

.horizontal-scroller {
  overflow-inline: auto;

  > * {
    background-image: linear-gradient(to right, red, blue);
    background-attachment: fixed(nearest-scrollport);
  }
}

This would trap the background image gradient to the scroller and share it amongst the children. The first item would be very red and the last item very blue.

There's some overlap in the mentality in #7475, where the proposal wants to add a parameter so authors can specify what to attach to.

The feature could be taken even further by allowing container to specify a background-attachment-name, so attachment isn't limited to scrollports or viewports, but any container. But this may increase the scope too much or introduce other issues, so is a "nice to have" but not required.

.horizontal-scroller {
  overflow-inline: auto;
  background-attachment-name: --scroller-gradient;

  > * {
    background-image: linear-gradient(to right, red, blue);
    background-attachment: fixed(--scroller-gradient);
  }
}