28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème BG sur mobile

Bonjour,

je débute dans le web, j'ai un soucis de bg sur tablettes et mobiles; J'ai utilisé les css comme suit : 
body {
	text-align: left;
	font-family: 'Droid Sans', sans-serif, Helvetica, Arial;
	font-size: 12px;
	line-height: 1.5em;
	color: #174689;
	background:url(../images/bg.png) no-repeat center fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
 	 -o-background-size: cover; /* pour Opera */
  	background-size: cover; /* version standardisée */
}
@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
}


Mais rien n'y fait. Le navigateur adapte la taille de l'image à la taille du contenu sur mon IPAD et sur mon IPHONE. Résultat, une image qui déborde, 1000 fois trop grande !

D'avance merci de votre aide
Ton css semble correcte...

Pour palier à tous problème liés à un réglage de ton navigateur, tu peux utiliser cette outils pour tester la responsivité de ton site : http://quirktools.com/screenfly/

Méfie toi aussi des éventuelles feuilles de style chargées en aval (plugin, modules, widget quelconques...) ou de script js modifiant dynamiquement le css.
Modérateur
Bonjour,

Tu as mis quoi dans ton code HTML pour que ce soit éventuellement "responsive" ? (généralement, ça se fait via un <meta name="viewport" content="..."> dans la partie <head> du code).

Amicalement,
Bonjour,

merci pour vos réponses. Le site fonctionne comme je le souhaite via l'outil en ligne conseillé, il n'en est pas de même, dans la réalité, sur IPAD et IPHONE. Le BG s'adapte, non plus à la résolution de l'écran, mais au contenu de la page. Au plus il y a de txt, au plus le bg est grand. Je ne vois rien dans mes feuilles CSS qui puisse avoir cet effet. Où et que dois-je chercher ?

Merci
body {
	text-align: left;
	font-family: 'Droid Sans', sans-serif, Helvetica, Arial;
	font-size: 12px;
	line-height: 1.5em;
	color: #174689;
	background:url(../images/bg.png) no-repeat center fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
 	 -o-background-size: cover; /* pour Opera */
  	background-size: cover; /* version standardisée */
}

Cette règle s'appliquera sur toutes les résolutions.

background-size: cover; fait en sorte que l'image s'adapte au contenu, si pour les petites résolutions tu ne veux pas cette effet, il faut le redéfinir dans ton media query (background-size: 100% auto; de mémoire ou l'inverse...)
Sujet clos
Aller à