## 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">`.