@h22red right, it didn’t have anything to do with it, but I think I’ve figured it out now.
First, you need to give the #header overflow:hidden;.
Then, you need to remove the relative position and Z-index from the #header, and assign it to the IMAGE inside the header.
#header {
width: 500px; height: 100px; color: white; font-family: “Alegreya SC”, serif; font-size: 35pt; filter: dropshadow(color=#000000, offx=1, offy=1); text-shadow: 1px 1px 2px #000000;
overflow:visible;
}
#header img {
position: relative; z-index: 1000;
}
Explanation: the image is wrapped in #header — which has a height of 100px so it cuts off the bottom of the image. No matter what Z-index you give the #header, it will never show anything other than the top 100 pixels of the image.
So, you need to give the #header overflow:hidden;, and it will show the rest of the image. But ah, it’ll still won’t show because there is still position:relative; on the #header — so that’s why you need to remove that.
Then to make the image itself overlap the menu, you assign that relative positioning (and the Z-index) to the image.
