Color overlay image not working on mobile

[ner00]

I tried to put color overlay on an image and it works fine on a desktop computer, but on a mobile device the color doesn't appear, it seems that it it gets under the image instead of over it. Any particular approach that would be universal or correct?

Here is an example of the style and code:

.parallax{
    background-color: rgba(0,0,0,.6);
 }

<div class="parallax" data-parallax="scroll" data-image-src="parallax_image.png"></div>

[wstoettinger]

the problem is, that on mobile the parallax implementation is not supported and the background image is set to the data-image-src.

You could use the inner HTML markup (see readme for more info on that)

or using a pseudo element with absolute positioning might help:

.parallax::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-color: rgba(0,0,0,.6);
    pointer-events: none;
    z-index: 99;
}

[ner00]

Thanks for those tips, very helpful.

I went with the pseudo element and got it working exactly as I wanted. I had to lose the 'z-index' attribute and use the 'before' pseudo-element instead to keep the overlay below some text inside a child container which also overlays the parallax image. In any case, the solution worked for both desktop and mobile.

.parallax{
    position: relative;
}
.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
}

<div class="parallax" data-parallax="scroll" data-image-src="parallax_image.png"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="hover-text">My Title</p>
            </div>
        </div>
    </div>
</div>