Seeking assistance on adding an image as a :after element to a navigation bar. The goal is for the image to cover the top portion of the next section according to the design.
I have set the :after element as position: absolute with a top: 100%, but it appears to be disappearing under the following element and adjusting the z-index has not resolved the issue. When the top value is less than 100%, the :after element can be seen above the navigation bar.
The HTML markup:
<nav>Contents</nav>
<div>Contents</div>
The CSS styling:
nav {
width: 100%;
position: relative;
}
nav:after {
content: '';
width: 100%;
height: 66px;
background-image: url('image.png');
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 100%;
}
No CSS has been applied to the div element yet...
Your help is greatly appreciated!