How to create an overlay for your image background bio page

Kavya Published on October 28, 2023

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.


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;

Make your Bio Page Today!!



Keep reading

More posts from our blog