Adding vertical parallax effect and overlay on banner image

parallaxImage Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Dimmed overlay with CSS, which give image a blackish effect, so text on it can be visible.


.parallax-container {
    overflow: hidden;
    background-color: #070504;
img.accordion-banner-image {
    object-fit: cover;
    width: 100%;
    opacity: .5;



Happy Coding.