Fixed background-gradient on menu items
Hi all, I am trying to create a menu with menu items that have a shared background gradient. But I can not get it to work. As you can see in my CodePen the gradient works fine when set to the background of the parent
<ul> but when set to the <li> with a background-attachment: fixed; it's not working as expected. There is a slight difference in color. But not the gradient I expect to see.
https://codepen.io/commproNL/pen/QwLadZX
I would really like some help and explanation on this one, I can not see what I am doing wrong.10 Replies
When you use
background-attachment: fixed, it is "fixed" to the viewport, so the green will be "hidden" off to the right side.In your first container the gradient is limited to the bounds of the element itself.
However, when you use
background-attachment: fixed the gradient is then defined by the bounds of the body as the attachment is relative to the body.
If you add more children to your second element you will see how they extend across the viewport and more of your gradient is visible.you could do something like this
https://codepen.io/MarkBoots/pen/mybpmVJ
set the background to the pseudo element of the childs, and make those positioned relative to the parent with the full size of the parent.
then hide the excess outside the childs with a clippath
(screenshot because i might delete the pen later)
Can't you also use
background-position: inherit to achieve that result ? I have vague memories of having done it that way before. (Can't try it myself right now, I'm not at the computer)Thanks all for the replies! Turns out Discord on my phone does not sent notifications 🫣
Thanks Kevin and Chris for clarifying the function of
background-attachment: fixed;.
I’ll try both the pseudo element approach and the background-position: inherit solution tomorrow when I’m back at the office. I’ll update here.
Hi all, I'm back, and have tried several things. First the background-position: inherit. That doesn't seem to change a thing. Maybe I am doing it wrong, but for me it's not working.
Furthermore, the pseudo element approach seems fit, but unfortunately not for my use case. I did not tell, because it didn't seem important. But the background needs to clip to the text. So not the menu-items will share the gradient, alle the text in the menu items need to share the gradient.Why do you need to use
background-attachment: fixed?
You could place the background gradient on your parent item, as per your first example, and apply the text clip directly on that.
Just make sure you that don't define a color on the menu items themselves
Oh... wow. That is very much easier
That didn't work yesterday, but I might have done something wrong. Because this is working fine now... Thanks!
yea, if we knew that, it would have been so much easier. well at least i found something new that i didn't think could be done before