Overlay

Add an alpha colored layer between your background-image and element text for a better contrast.

Dark Overlay
Overlay 20%

data-overlay="2"

Overlay 50%

data-overlay="5"

Overlay 80%

data-overlay="8"

Light Overlay
Overlay 30%

data-overlay-light="3"

Overlay 60%

data-overlay-light="6"

Overlay 90%

data-overlay-light="9"

Scrim

Add a gradient layer between your background-image and element text for better contrast.

Top scrim
Top scrim 20%

data-scrim-top="2"

Top scrim 50%

data-scrim-top="5"

Top scrim 80%

data-scrim-top="8"


Bottom scrim
Bottom scrim 30%

data-scrim-bottom="3"

Bottom scrim 60%

data-scrim-bottom="6"

Bottom scrim 90%

data-scrim-bottom="9"

Please note that when you're using an overlay or scrim, you content should wrap by an element with position relative, so the content will place above the overlay. By default, the immediate .container and .container-fluid classes inside a .section have relative position as well as .card-body inside a .card. So in most cases you don't need to do any extra work. But if you notice that overlay obscured your content, simply wrap your content with a <div class="position-relative">.