Color Section with fixed Background

// custom class for color-section is: add-gradient
function add_gradient_to_section_bg_image() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($){
	$('.avia-section.add-gradient').each(function() {
		var bgImg = $(this).css('background-image');
		var bgPos = $(this).css('background-position');
		if($(this).hasClass('avia-bg-style-parallax')){
			$(this).css('background-image', 'linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
			$(this).find('.av-parallax-inner').css('background-color', 'transparent');
		}
		if($(this).hasClass('avia-bg-style-fixed')){
			var headerHeight = $("#header").height();
			$(this).css({
			'background-image' : ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )',
			'background-position' : '  '+bgPos+' , 0px '+headerHeight+'px',
			'background-color' : 'black',
			});
		} 
		if($(this).hasClass('avia-bg-style-scroll')){
				$(this).css('background-image', ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
		}
	}); 
})(jQuery);
});
</script>
<?php 
}
add_action('wp_footer', 'add_gradient_to_section_bg_image');

Color Section with parallax Background

Color Section with scroll Background