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.

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;
}