Search code examples
csssafaribackground-color

CSS background-color not working in Safari

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

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

enter image description here

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>

Help appreciated.

Solution

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

    use this if you want to use z-index:

    z-index: 0; // or 1