[Résolu] Media query de type @media (max-width: 640px) {...}. marche p

Bonjour tous,

J'ai un site qui va bien sur tous les écran, les Smartphones et tout SAUF 1 style qui me pose problème.
Sur un #contour, faut que je supprime l'image de fond et que je la remplace par une couleur hexa.

#contour {
background-clip:content-box;
background-image: url("../img/fond.jpg");
background-repeat: no-repeat;
border:1px solid #03b1df;

Arg ....

Bon cela doit pas être la fin du monde quand même

Je me dis, pas grave je vais voir chez Alsa comment ils résolvent cela ...
Je tombe sur l'astuce "Une feuille de styles de base pour le Web mobile"
Cela tombe bien, c'est ce qu'il me faut.

Côté CSS, j'intègre comme convenu :
@media screen and (max-width: 640px) {
#mon -style-qui-pose-probleme { }
}

Cela donne donc

@charset "utf-8";
@import"box.css";
@import"presse.css";
@media screen and (max-width: 640px) {
#contour {
background-image: none;
background-color:red;
}
}

Côté html, je rajoute
<meta name="viewport" content="width=device-width" />

Et bien cela marche pas.
Sur les écrans autres que smartphone rien à bougé (c'est déjà ça !!)

Mais sur IPhone le fond de mon #contour a bien une couleur rouge (comme ça je peux pas la louper !!!) mais j'ai encore mon image de fond pour se tape l'incruste par dessus

Je comprend pas pourquoi ?
QQ peut m'expliquer ?

Salut,
Pour moi tout à l'air bon, si tu ajoutes un !important après le

background-image:none!important;

ça fait rien non plus ?
Modifié par artsx (03 Dec 2013 - 16:20)

background-image: none !important;

Yes ça le fait, il était donc important de le mettre

Merci de ton aide
Bonne journée