image de fond pas prise en compte sur mobile

[Laférosse]

Bonjour. J'ai mis  une image de fond avec ce code qui fonctionne sur ordi mais qui n'est pas pris en compte sur mobile.



Comment l'adapter pour que l'image apparaisse également sur mobile ?  Merci par avance.

Code:

body{
background-image: url('https://zupimages.net/up/23/30/7jk3.png') !important;  
background-repeat:no-repeat;
background-position:top center;
background-size:100% auto;
background-attachment:fixed;  
}


[Toryudo]

Bonjour !

Je crois qu'en retirant le background-repeat:no-repeat; ça fonctionne, il est bien visible comme il faut sur PC et sur téléphone.

[Laférosse]

Merci Toryudo c'est parfait. Juste une petite question par rapport à mon code.
Est-il mieux de se servir de

Code:

background-size:100% auto;

ou de de mettre

Code:

 width: 100%;

pour adapter une image sur toute la largeur des écrans ?

[Toryudo]

Ce n'est pas exactement la même chose, et c'est bien background-size:100% auto; qu'il faut utiliser dans le cas présent.

"width: 100%;" permet de créer un cadre d'une largeur égale à 100% de la taille de l'élément qui le contient
"background-size: 100% auto;" permet d'ajouter un background qui va prendre 100% de la taille du cadre dans lequel il se trouve

Si je mets "background-size: 100% auto;" sur un petit cadre qui fait 200px de large, alors mon background prendra 100% de la taille du cadre, soit 200px. Puisque dans votre exemple, on fait un "background-size: 100% auto;" sur l'élément body, un cadre qui, techniquement, fait 100% de la taille du navigateur (ou, dit autrement, a un width: 100% par défaut), alors le background prend 100% de la taille du navigateur automatiquement.

[Laférosse]

Merci beaucoup pour vos explications. Une bonne journée à vous.