How to Put a Dark/Light Overlay a Busy Background So Your Text Stays Readable

1 month ago - by Kayla⟡ - Backgrounds & Overlays - used 24 times

This adds a transparent dark layer over your background image. (.45 this number controls how dark it is)

Note use: Must replace YOUR-IMAGE-URL-HERE with your background image URL (even if its earlier in your code)

For a soft white layer, change both overlay colors to:
rgba(255, 255, 255, 0.55)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>
/* DARKEN A BUSY BACKGROUND */

html,
body {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        url("YOUR-IMAGE-URL-HERE") !important;

    background-repeat: repeat !important;
    background-attachment: fixed !important;
}
</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Backgrounds & Overlays

« Back to Backgrounds & Overlays | « All Profile Elements