IMPORTANT NOTE: as of Sept. 2025 anchor positioning only works in Chromium browsers. There is a polyfill: https://github.com/oddbird/css-anchor-positioning, BUT IT DOES NOT WORK RELIABLY AT ALL, SO ANCHOR POSITIONING CANNOT BE USED YET. FIREFOX AND SAFARI SAY THEY WILL BE IMPLEMENTING SUPPORT IN FALL 2025
See Kevin Powell's oringal tutorial here
Due to the somewhat complicated nature of Kevin Powells original tutorial, I have broken my writen turotials in to 4 parts. This is the fourth. Subsequent tutorials note the changes in code from the preceeding tutorial
This tutorial is the same as the third one, EXCEPT:
a) Put the same background image on body (optional) AND nav::after element and make them background-attachment: fixed (see body element and nav element in this doc.) This makes both elements share the same background image which is neat. If background image isn't what you want on body, just take it off.
To make link text easier to read on background when hover on, we add linear gradient with slight black with high oapcity to background image on nav::after. So background on nav::after becomes (CSS already in element above):