Have you tried adding a background overlay to your section with a parallax background image or video background? it mostly didn’t work or you had to install a plugin like background plus to just be able to add an overlay to your section background but all it actually takes to achieve is a few lines of CSS.
Adding our overlay to the section:
On the section, you would like to add your background overlay to, open that section settings and select the advanced tab, under the advanced tab click on the Custom CSS toggle, and where it says before is where we will be adding the following CSS to.
Add the following CSS to the before
content: ''; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background: rgba(0,0,0,0.85); /* Change you overlay colour */
Add a basic colour or a gradient:
All you need to do is replace the last line of code to the colour you want to use, for setting your own basic background colour all you need to do is click on the little coloured circle and it will popup a colour selector for you to choose your colour.
To create a gradient overlay you will can use the following CSS Gradient site to generate your gradient CSS code, first thing you will need to is select the colours you want to use for your gradient, change any of the other settings for your gradient that you want to change.
Once you’ve created your gradient, you can scroll down a bit to the CSS section, then copy the CSS to your clipboard
The DEMO | Result
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.