CSS background opacity turns gray and covers image on mobile only

Question

Here is the goal. Screenshot is taken from Desktop on Google Chrome:

However that is not what it looks like on mobile. Shrinking the window size on desktop also gives the correct result, so I'm guessing it's not a matter of screen size, but platform. This is on a wordpress site, and the html for that section is:

<div id="athena-page-jumbotron" class="parallax-window" data-parallax="scroll" data-image-src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>">

The CSS to get that effect is:

#athena-page-jumbotron {
 width: 100%;
 background-size: cover;
 height: 400px;
 overflow: hidden;
 background: rgba( 0,0,0,0.4 ); // this is what gives it the opacity
}

However on mobile it looks like this:

You can see that the dark overlay is missing, which makes the text hard to read. To try to solve the issue, I added additional rules to enforce the opacity for the overlay

#athena-page-jumbotron {
 background: rgba(0,0,0,0.4) !important;
}

However this results in the following effect, which is undesirable:

As you can see, the overlay is still missing but there is a gray box. Changing the CSS to background-color instead of background reverts it back to the original. Changing the opacity from 0.4 to 1 changes the gray box to black, and changing it to 0 makes the box white. Also adding a @media tag for the resolution doesn't help much.

Any help is greatly appreciated!

Answer 1

You can easily do this with linear-gradient.

 .tinted-image { font-size: 32px; line-height:200px; color: white; text-align: center; width: 300px; height: 200px; background: /* top, transparent red */ linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), /* bottom, image */ url(https://blogs.office.com/en-us/wp-content/uploads/sites/2/2017/06/June-updates-to-Get-and-Transform.jpg); } 

 <div class="tinted-image"> about us </div>