Image d'arrière-plan, les mobiles et les médias de la requête

Je suis en train de les adapter aux mobiles. J'ai l'image de fond qui ne sont pas correctement redimensionner. J'ai essayé une requête de média et n'ai aucune idée de pourquoi ça ne marche pas. Mon code si dessous;

CSS:

.container3{
  display: flex;
  align-items: center;
  background-size: cover;
  height: 700px;
  text-shadow: 0.25px 0.25px 0.25px #000000;
  background-image: url('Images/homepage.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@media all and (max-width:480px)and(min-width:0px) {
  .container3 {
    width: 100%;
    background-image: url('Images/homepage.jpg');
  }
}

HTML:

<html>	
  <title>Unity</title>
  <link href="Style.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <meta name="viewport" content="width=500, initial-scale=1">
  <body>

    <div class="container3">
      <div class="title">
        <h1>
          bringing people together
        </h1>
        <p>free advertising space</p>

      </div>	
    </div>


  </body>
</html>

  • Pouvez-vous vérifier w3schools.com/css/css_rwd_images.asp essayez pas d'utiliser le max de largeur au lieu de largeur
  • Nous ne pouvons pas aider, car votre exemple de code est cassé. Pour l'image manquante utiliser un service comme placehold.c'
InformationsquelleAutor Allan W MacLeod | 2016-09-06
  1. 2

    CSS:

    .container3{
  display: flex;
  align-items: center;
  background-size: cover;
  height: 700px;
  text-shadow: 0.25px 0.25px 0.25px #000000;
  background-image: url('Images/homepage.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@media all and (max-width:888px) {
  .container3 {
    width: 100%;
    background-image: url('http://feelgrafix.com/data/background/background-17.jpg');
  }
}

    HTML:

    <html>	
  <title>Unity</title>
  <link href="Style.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <meta name="viewport" content="width=500, initial-scale=1">
  <body>

    <div class="container3">
      <div class="title">
        <h1>
          bringing people together
        </h1>
        <p>free advertising space</p>

      </div>	
    </div>


  </body>
</html>

    Il ne marche pas parce que la syntaxe est fausse, vous devez utiliser des espaces dans @media all and (max-width:480px)and(min-width:0px). comme ceci:@media all and (max-width:480px) and (min-width:0px) aussi, il est redondant, depuis un appareil aura toujours plus de 0px largeur, de sorte que vous pouvez supprimer la deuxième partie.

    J'ai utilisé max-width:888px de sorte que vous pouvez voir l'exemple de img dans le fragment de code.

    • Merci beaucoup pour vos commentaires, vous avez de me lever et courir à nouveau! Merci beaucoup! 🙂
    InformationsquelleAutor Ernesto Mayoral Cabezas