How to create an overlay for your image background bio page

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.

Image Background
Without overlay
With black transparent overlay

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.

#profile.container{
    max-width: 100%;
    padding: 25px;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    background-color: #00000091;
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
}