bonjour,

j'utilise @media query pour le css de mon site en responsive. J'utilise des videos en background dans certains header et dans mon css a l'aide de media query je fais mes réglages pour qu'une image remplace le fond vidéo avec une image au changement de taille d'écran.

Jusque la tout va bien tout fonctionne , mais lorsque je reviens en plein écran sur mon mac 27 pouces (je recharge la page ). j'ai l'image que j'ai indiqué dans mon css pour les tailles plus petites qui apparaît une fraction de seconde le temps que la vidéo se lance .

j'ai donc fait forcement un background:none; mais du coup ,  ce qui me parait normal l'image n'apparait plus lorsque je teste au changement de taille d'écran.

voici le bout de code css :

@media only screen and (max-device-width:480px){
  .service-graphisme{
    background-image: url("http://localhost/test/wp-content/uploads/2017/04/blur-1867748_1920.jpg") !important;

  }

  .vidbg-container{
  	display: none;/**** container dans lequel la vidéo ce charge *****/
  }
}

.service-graphisme{
	background-image: none !important;/****** container de l'image *****/
}

j'ai essayé pour dire qu'il ne m'affiche pas l'image quand l’écran est à 100% :

@media only screen and (max-device-width:100%){
  .service-graphisme{
    background-image: none;

  }

 }

mais cela ne fonctionne pas

merci pour l'aide.

-
Edité par theo972 27 avril 2017 à 15:22:17

Bonjour,

Tu as mis ton background=none; pour les écrans dont la taille est au max de 480px. 

Je ne crois pas qu'un min-device-width: 100% fonctionne, il faut spécifier une largeur en pixels.

Essaie peut-être ça :

@media only screen and (min-device-width:1140px) {
   .service-graphisme {
       background: none;
   }
}

-
Edité par ttlp 27 avril 2017 à 16:30:56

Bonjour,

il faut mettre les sélecteurs entre @media après ceux qu'ils doivent surcharger, car @media n'ajoute pas de poids aux sélecteurs.