Can someone explain how background-attachment is used in css

Hello, can someone explain how background-attachment is used and where please. I tried to experiment with it a bit: https://codepen.io/Fakeur/pen/YPXqzQd But I didn't understand for the scroll, like we say that the background scroll together with the page but when I scroll the entire page, nothing seems to happen. For fixed, it's a bit confusing, we say it's attached to the viewport, it is supposed to move? local means it scroll when we scroll the content in the container itself. By the way, the local value has many use case, no? I see I often see things like that on the web, like while we are scrolling down, an image is kind of moving, I don't know if it's a parallax effect or something else though :c.
Fakeur
CodePen
Untitled
...
5 Replies
Faker
FakerOP7d ago
will have a look and come back 2min I'm really confused about the fixed value, here in the MDN example: https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html Using fixed makes the element move if we scroll entire page, why in the example in the link you gave, it doesn't seem to move though :c
ἔρως
ἔρως7d ago
it's fixed to the viewport not the element
Faker
FakerOP7d ago
oh ok I see By the way, the background-attachment of local, I think it's widely used nowadays no? I think I saw on many websites, when we scroll, the background picture scroll down together
ἔρως
ἔρως7d ago
i think that that's the default value

Did you find this page helpful?