In this tutorial we will set a black transparent overlay on top of an image we have already set as background for our bio page. The idea is to make the texts “pop-out” a little more and that test and buttons don’t get blended with the background.
Custom CSS
You only need to copy and paste this CSS code into you Custom CSS box in the settings page when you’re editing you bio page. By Adding this code you can create overlay for your image background.
COPY CODE
body::before {
content: "";
background: rgba(0, 0, 0, 0.3); /* Lighter black overlay with 30% opacity */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Placed behind the content */
/* Ensure the overlay covers the entire page, including the footer */
pointer-events: none;
}
