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 — making text more prominent and preventing buttons from blending into the background.

What this tutorial does

In this tutorial we will set a black transparent overlay on top of an image we have already set as the background for our bio page. Two simple goals:

• Make text elements stand out more prominently. A busy image fights with overlaid text — the overlay calms it down.
• Prevent buttons from blending into the background. Light buttons over a sun-lit photo, dark buttons over a night scene — the overlay creates the contrast you need.

Before and after

Without an overlay, text tends to blend into bright or busy areas of the background image. With a black semi-transparent overlay on top, every element above it — headlines, body copy, buttons — gains a uniform, predictable contrast layer to sit on. The image still shows through enough to set the mood, but it stops competing with the content.

The CSS

Copy and paste the following code into the Custom CSS box in your bio page settings:

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

How the overlay works

The trick is the background-color: #00000091 declaration. #000000 is black, and the last two hex digits — 91 — are the alpha channel: how opaque the color is.

• #00000091 = black at ~57% opacity (a strong overlay, good for very bright photos)
• #00000066 = black at ~40% opacity (a softer overlay)
• #000000CC = black at ~80% opacity (very dark, almost matte black)

The rest of the properties (zero margins, full-width container, min-height: 100vh) make sure the overlay covers the whole viewport — corner to corner, edge to edge — so there are no untreated strips of bright background image around the content.

Where to paste the code

Open your bio page in the editor, navigate to the Settings tab, scroll down to the Custom CSS box, and paste the snippet. Save and hit Update. View the live page — the preview window doesn't always reflect the overlay; the published page does.