CSS background-color not working in Safari

Question

We can't get a CSS background colour to work in Safari.

It works in Chrome, Edge & Firefox. It should look like this:

Instead, the dark background colour is not showing at all, the background image for body is showing, which isn't what we want.

Here's a snippet:

.block-dark .block-overlay {
    background-color: #2d3133!important;
    position: absolute;    
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}
.block-dark .container {color: white;}

<div class="block-dark">
  <div class="block-overlay" style="opacity: 90%"></div>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xl-8">
        <h1>Air conditioning</h1>
      </div>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66057597/css-background-color-not-working-in-safari

Answer 1

Isn't that because of z-index: -1; ???

use this if you want to use z-index:

z-index: 0; // or 1