CSS, background image ne s'affiche pas convenablement

170759
,

Bonjour,

Voila je rencontre un petit problème avec un site internet que je fais, particulièrement au niveau du background, et uniquement sur les téléphones mobiles utilisant SAFARI, ou Google Chrome. Je n'ai aucun problème en version Desktop ou sur mobile utilisant Mozilla Firefox.
En fait le problème est que sur google chrome ou safari en version mobile, mon background n'apparait comme il faut et je ne comprend pas pourquoi. Il est cisaillé.

Ce que je fais

Voici une partie de mon code CSS


/*Style CSS pour les tÊlÊphones mobiles*/
 @media ( max-width : 768px )

{


body
{
background-color: black;
background-image: url('../img/portail.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Jacques Francois', serif;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 }

 h1{
    margin-top: 2%;
    font-weight: bold;
    font-family:  'Pinyon Script', cursive;
    font-size: 45px;
    color:black;
}

#background_opacity {
position: fixed;
z-index: -10;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.4); /* L'opacite se regle ici */
}
}

Et voici une partie de mon html


<!DOCTYPE html>
<html lang="fr">

  <head>
    <!--meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="title" content="Chateau de Rotalier">
    <meta name="description" content="Chateau de Rotalier, ses vins, son histoire, son patrimoine, au coeur du Jura sud et du Revermont">
<meta name="author" content="Quentin Genet">
<title>Chateau de Rotalier - Vins du Jura</title>
<!-- Bootstrap CSS et fichier perso CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Jacques+Francois|Pinyon+Script&display=swap" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">
<!-- Importation des polices GoogleFonts -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
<script src="js/script_index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
  <header>

  </header>

<div class="container" >
  <div class="row mt-5">
    <div class="col mt-5 text-center">

      <h1  class="titres_pages">
        <strong>
          Château
          <br>
           de 
          <br>
           Rotalier
        </strong>
      </h1>

    </div>
  </div>
</div>

<div class="container">
  <div class="row mt-1">
    <div class="col text-center">

      <a href="index2.php" class="btn btn-default btn-outline-dark btn-lg" role="button">ENTRER</a>
    </div>
  </div>
</div>

<span id="background_opacity"></span>

</body>

</html>

Ce que je veux

Je souhaiterai que le background s'affiche correctement sur tous les support mobiles, et particulièrement en utilisant google chrome et safari... Merci d'avance pour l'aide ou les suggestions.