As I am not very familiar with CSS, I may be facing an XY problem where I have been able to find information about the individual parts involved but struggle to combine them effectively.
The challenge is to add a background to a navbar while also incorporating an after svg element that fills the image underneath it. Both the navbar and the svg need to use the same background.
I came across this blog post which covers using an image as an SVG fill, but I haven't been successful in combining it with using the same image as a background for another element.
Below is the code I have been working on so far:
body, p {
margin: 0;
}
.navbar {
padding: 10 10 5 15;
}
.navbar a {
margin-right: 10;
}
nav::after {
content: "";
position: absolute;
z-index: 2;
height: 15px;
width: 100%;
left: 0;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
background-size: 50%;
}<nav>
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</nav>
<body>
<img src="https://cdn.pixabay.com/photo/2013/07/13/13/36/triangle-161210_1280.png">
</body>It results in this visualization (observe the rip effect appearing over the ruler):
https://i.sstatic.net/0K32J.png
If I wanted to incorporate this image (another royalty-free image) as the background image of the navbar, the final look would be similar to this (crudely edited with GIMP):