L'image que j'utilise pour mon arrière-plan (qui est fixe) s'affiche à 100% au format Web, mais lorsque je l'émule sur Ipad (1024x768), l'image cesse de s'adapter à la largeur de l'écran et elle remplit juste environ 70% de la hauteur de l'écran.

Voici le CSS que j'ai utilisé pour le format du site Web:

.body{
  background-image: url("/img/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  height: 5700px;
  width: 100%;
    }

Voici le CSS que j'ai utilisé pour le style Ipad:

@media screen and (max-width: 1024px) {
.body{
    background-image: url("/img/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    height: 5700px;
    min-width: 1024px;
  }
}

J'ai essayé min-width: 1024px; car j'ai trouvé une question similaire avec cette suggestion, mais cela n'a pas fonctionné.

0
Calicorio 2 août 2017 à 14:30

2 réponses

Grâce à @Traver, j'ai trouvé la réponse:

.body{
    background-image: url("/img/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 200vh;
    height: 5700px;
    width: 100%;
  }

Je devais juste changer les unités de taille d'arrière-plan en vh et supprimer auto (mais j'ai aussi testé avec et cela a fonctionné). Lui donner un nombre de 200vh suffit pour le mettre à l'échelle sur toute sa largeur et sa hauteur.

EDIT: La réponse de Mihai T est la meilleure. Vérifie ça.

0
Calicorio 2 août 2017 à 13:41

Essayez d'utiliser width: 100vw. vw signifie la largeur de la fenêtre, donc cela devrait faire en sorte que l'arrière-plan occupe toute la largeur de la fenêtre.

0
Henry 2 août 2017 à 11:42