media query et background image

Version imprimable

06/07/2015, 14h47
abc.xyz

media query et background image

bonjour,

je specifie pour mon site une image de fond avec background-image:url(chemin de l'image) et background-size:cover.
comme je ne veux plus de cette image pour les mobiles je mets via les media query pour les mobiles la propriété background-image à none.
L'image devrait disparaitre sur les mobiles non?Et bien elle disparait pas..:oops:
06/07/2015, 16h03
Invité

Bonjour,
au lieu de ton blabla habituel, ne pourrais-tu pas mettre, pour UNE fois sans qu'on te le demande,... LE CODE ??

Une page "test" en ligne serait un "plus"...

Code:

1
2
3
4
5
6
7
8
 
#presentation { 
 background-image: url(../img/photo_accueil.jpg); 
  -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 */
}

pour les mobiles:

Code:

1
2
3
4
5
 
#presentation { 
 background-image:none; 
 
}

06/07/2015, 17h14
nef1912

Bonjour,

Si je peux me permettre, poster ce code ne sert à rien. Il nous faut ta media querie pour t'aider, l'ordre dans lequel tu déclares les éléments dans le css... bref, un code complet pour la partie concernée.
On pourra mieux t'aider! ;)
06/07/2015, 17h21
abc.xyz

je ne peux fournir plus . J'ai bien mis pour mon deuxieme code "pour les mobiles" donc ce deuxiemé code est à destination des mobiles donc dans une media query traitant des mobiles.
06/07/2015, 17h28
nef1912
Dans ce cas, je peux seulement te dire :
- Vérifie que ta media querie est bien après la déclaration initiale de #presentation.
- Essaye avec !important, des fois que tu le surcharges quelque part...
- Difficile de t'aider plus sans code complet.
Et j'ai bien vu ton "pour les mobiles" mais autant poster la media querie...
08/07/2015, 10h53
abc.xyz

tout le code est là (merci de ne plus me parler de la media query que j'ai pas mise mais que vous pouvez sans peine imaginer).
Je vais finir par penser que mettre pour les mobiles "none" comme valeur à la propriété background-image n'est pas du tout la solution..en effet cela ne fonctionne pas.
08/07/2015, 11h07
Invité

Le code que tu montres est FONCTIONNEL.

DONC, s'il ne fonctionne PAS, il faut chercher l'erreur AILLEURS !

Si tu ne MONTRES PAS PLUS de code, on ne peut rien pour toi.
08/07/2015, 11h14
nef1912

Malheureusement personne n'est à l'abri d'une petite erreur de syntaxe, d'un petit détail qui change tout. D'où l'importance de poster un code complet avec tous les éléments utilisés.
J'ai bien compris que tu ne souhaitais pas poster tout le code (pourquoi je ne sais pas...), si c'est confidentiel change les noms des classes pour ne pas qu'on reconnaisse.
Bref. :roll:

As-tu vérifié les deux premiers éléments de la liste dans mon précédent message?

Comme l'a dit jreaux62, c'est fonctionnel donc c'est la bonne propriété.
08/07/2015, 11h31
abc.xyz

nef, oui j'ai bien vérifié ce que tu m'as demandé de vérifier.
08/07/2015, 11h39
nef1912

Ce sont les raisons les plus "basiques".

L'erreur vient d'ailleurs, sans code complémentaire, impossible pour nous de t'aider plus.

nef, voici tout le code que tu me demandes, je ne peux pas t'en donner plus car il n'y en a pas plus de code.

Code:

1
2
3
4
5
6
7
8
 
#presentation { 
 background-image: url(../img/photo_accueil.jpg); 
  -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 */
}

pour les mobiles:

Code:

1
2
3
4
5
6
7
8
9
 
 
@media screen and (min-width: 0px) and (max-width: 767px) {
#presentation { 
 
  background-image:none; 
 
}
}

08/07/2015, 16h24
nef1912

Et le HTML associé?

Cette propriété devrait fonctionner. Tu testes sur un smartphone en particulier? Ou sur ton pc?
08/07/2015, 22h22
NoSmoking

Bonjour,

Citation:

tout le code est là (merci de ne plus me parler de la media query que j'ai pas mise mais que vous pouvez sans peine imaginer).

perso j'aime bien (min-width: 0px) :mouarf: (je sais que tu ne vas pas apprécié).

Depuis le temps tu aurais pu faire un exemple rapide et léger pour que l'on puisse te répondre plus rapidement sans être obligé de te supplier.

Une remarque quand même as tu prévu une <meta name="viewport" ...., car le viewport peut être différent du device, sinon avec ce que l'on a aucune raison que cela ne marche pas.

le HTML:

Code:

1
2
3
4
<div id="presentation" class="container-fluid heightContainer">
    <div class="row heightCent"> 
        <div class="col-sm-2 col-md-2 heightCent hidden-xs">
...

et oui c'est ça aussi le code:attraper des cheveux blancs.:aie:

10/07/2015, 17h30
Sodium

Ce n'est pas bien compliqué de régler ce genre de soucis.
Analyse ta page avec firebug ou tout autre outil de développement. Cela permettra de voir si :

- Le style s'applique bien à l'élément cible
- Si elle est écrasée par une autre règle

Je parierais plus sur un problème d'ordre de chargement des CSS ou de mediaquery.