28111 sujets

CSS et mise en forme, CSS3

CSS, background image ne s'affiche pas convenablement

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é.

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.

Voici 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 mon code 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>

Modifié par mckent1 (30 Jul 2019 - 19:29)
Modérateur
Et l'eau,

Sur mon mobile, je ne vois de souci.

Android : 9
Sony xperia XA2
chrome 72

Ton url est fausse. Enlever le "r" au début
Pour ma part, voici comment appraît ma page d'accueil sur mon mobile avec google Chrome... Le background est cisaillé...

upload/1564561784-76524-screenshot20190730-100813.jpg
Modifié par mckent1 (31 Jul 2019 - 10:30)
Administrateur
Bonjour,

Je pense que c'est tout simplement parce que ton image de fond est placée sur body et que celui-ci n'a pas de hauteur.

Tu peux tester d'appliquer ceci ?

body {
  min-height: 100vh;
}
Meilleure solution
Ouf! Ca marche.
Il fallait en fait appliquer :
html{
min-height : 100vh;
}

Merci Raphael pour ton aide !
Par contre avec les autres pages du site, sur version mobile avec chrome uniquement,
je ne comprend pas pourquoi mon background apparait très zoomé....
Sujet clos
Aller à