[csswg-drafts] Consider `background-attachment: fixed()` to enable attaching to more than the viewport [css-background] (#9927)

argyleink has just created a new issue for https://github.com/w3c/csswg-drafts:

== Consider `background-attachment: fixed()` to enable attaching to more than the viewport [css-background] ==
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:

<img width="1027" alt="Screenshot 2024-02-08 at 10 15 10 AM" src="https://github.com/w3c/csswg-drafts/assets/1134620/dc3b6a7d-7ddb-47c0-a106-dda569995e12">

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

<img width="1028" alt="Screenshot 2024-02-08 at 10 15 50 AM" src="https://github.com/w3c/csswg-drafts/assets/1134620/35828e07-c29f-46f0-b418-1fe180ac746d">

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](https://drafts.csswg.org/css-backgrounds-3/#background-attachment:~:text=The%20background%20is%20fixed%20with%20regard%20to%20the%20viewport.)). 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.

```css
.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 https://github.com/w3c/csswg-drafts/issues/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.

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

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9927 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 8 February 2024 18:22:37 UTC