Background overlay

You can add this .bg-overlay-black-10 class to any element in your HTML code to apply overly color on any image or any section. See example below:

<div class="bg-overlay-black-10">
  [YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class Description Class Description
.bg-overlay-black-10 which means apply black color overlay with 0.10 overlay .bg-overlay-black-20 which means apply black color overlay with 0.20 overlay
.bg-overlay-black-30 which means apply black color overlay with 0.30 overlay .bg-overlay-black-40 which means apply black color overlay with 0.40 overlay
.bg-overlay-black-50 which means apply black color overlay with 0.50 overlay .bg-overlay-black-60 which means apply black color overlay with 0.60 overlay
.bg-overlay-black-70 which means apply black color overlay with 0.70 overlay .bg-overlay-black-80 which means apply black color overlay with 0.80 overlay
.bg-overlay-black-90 which means apply black color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

Suggest Edit