28111 sujets

CSS et mise en forme, CSS3

Background ne s'affiche pas sur les smartphones

Bonjour,

après avoir, grâce à "alla00958", résolu le problème du menu déroulant en mode smartphones sur mon site, j'ai un autre problème, déjà ancien, sur le même site. Sur tous les smartphones et même les tablettes iPad et autres, mon background ne s'affiche pas. A la place, il y a un fond blanc. Alors que sous Firefox, ce fond est présent, même en résolution "smartphones". Ce background est une simple couleur de fond en radial-gradient. Le site :

mamoutou-kone.fr

Voici la partie html concernée :
---------

html, body {
  
   background-image:-moz-repeating-radial-gradient(30deg, gray, #FAFAD2 );
   background-image:-webkit-radial-gradient(30deg, gray, #FAFAD2);
   background-image:-o-radial-gradient(30deg, gray, #FAFAD2);
   background-attachment:fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
   width: 100%;
   background-position: center center;
   background-repeat: no-repeat;
   border:0px solid transparent;
   font-size:100%;
   margin:0px 0px 0px 0px;
   height:100%;
   min-height:100%;
   padding:0px 0px 0px 0px;  
}

---------
Une solution ?

Merci.
Modifié par Bongota (13 Oct 2017 - 13:07)
Olivier C a écrit :
La règle n'est peut-être tout simplement pas supportée par le navigateur de votre smartphone...


Merci pour la réponse, mais il ne s'agit pas de "mon" smartphone, mais de tous ceux sur lesquels j'ai tenté d'afficher mon site (des Apple, des Samsung, des Chinois, etc). Peut-être est-ce normal ? En tous cas, il doit bien y avoir des backgrounds qui s'affichent sur les smartphones, sinon ça se saurait. A la lecture de mon site, le fond est blanc, ce qui élimine d'office l'utilisation d'un background noir avec texte en blanc. Configuration quand même assez courante, de nos jours.

Et je crois que le problème se situe dans le code html que j'ai donné. Il n'y a rien, à ma connaissance, dans le css qui concerne ce background.

Je cherche...
Peut-être placer la partie "background" dans la feuille de style css pourra changer quelque chose ? Ou alors la placer dans le "header" de la page html ?

Je viens de la mettre dans la feuille de style css, en lieu et place de la page html d'accueil. Je mets ça sur le serveur et je teste, mais je ne vois pas trop ce que ça pourrait changer.
Bonjour,

Épurons déjà le code de ce qui est inutile pour y voir plus clair :
html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background-image: -webkit-radial-gradient(Gray, #fafad2);
  background-image: radial-gradient(Gray, #fafad2);
  background-attachment: fixed;
  background-size: cover;
}


Le problème était situé ici :
background-image: radial-gradient(Gray, #fafad2); /* apparement la règle ne supporte pas les degrés en paramètre */
Olivier C a écrit :
Bonjour,

Épurons déjà le code de ce qui est inutile pour y voir plus clair :
html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background-image: -webkit-radial-gradient(Gray, #fafad2);
  background-image: radial-gradient(Gray, #fafad2);
  background-attachment: fixed;
  background-size: cover;
}


Le problème était situé ici :
background-image: radial-gradient(Gray, #fafad2); /* apparement la règle ne supporte pas les degrés en paramètre */


Oui, ça fonctionne !
Je viens de tester la page d'accueil sur un iPad mini. La couleur de fond est là.
Sauf que l'épuration du code (bienvenue...) a fait remonter le titre et le contenu de la page, en mode portrait. Et je n'arrive pas à le redescendre, même en augmentant la valeur de top en %.

Edit: Je viens de trouver la "solution", en ajoutant height:100%;
Restera maintenant à voir pourquoi les liens du menu ne s'affichent pas en bleu, toujours sur iPad mini.

Merci infiniment pour l'aide.
Modifié par Bongota (18 Oct 2017 - 11:03)
Meilleure solution
Sujet clos
Aller à