web-dev-qa-db-fra.com

Requêtes multimédias et images d'arrière-plan

J'ai un div

<div id="page">

</div>

Avec le css suivant:

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Je remarque que lorsque je redimensionne mon navigateur, je vois l'arrière-plan "mobile" (bon) mais si je reviens en arrière et que j'agrandis mon navigateur, mon arrière-plan "grand" précédent ne réapparaît pas toujours.

C'est un problème intermittent, mais il se produit assez souvent pour que je pense que je devrais y remédier.

Existe-t-il un moyen de contourner ce problème "l'image d'arrière-plan n'apparaît pas" ou un moyen de redimensionner les images d'arrière-plan, de sorte que la requête multimédia "rétrécisse" l'image d'arrière-plan pour l'adapter à la nouvelle taille? Pour autant que je sache, il n'existe aucun moyen (répandu) de modifier la taille d'une image d'arrière-plan ...

cssmedia-queries
16
redconservatory

Selon ce test :

Si vous souhaitez uniquement la version de bureau de l'image à télécharger sur le bureau ...

et uniquement l'image mobile à télécharger sur l'appareil mobile -

Vous devez utiliser un min-width déclaration pour spécifier une largeur de navigateur minimale pour l'image de bureau ...

et un max-width pour l'image mobile.

Votre code serait donc:

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}
24
Danield

Le code que vous avez fourni est un petit buggy qui est probablement un bon point de départ pour le moment

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}

La partie de requête multimédia n'est pas terminée. Vous devez toujours fournir le sélecteur CSS que vous avez utilisé en dehors de la requête:

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

Commencez par cela et faites-moi savoir si cela règle les choses.

1
ckaufman

veuillez utiliser

@media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}
0
Tushar Dhingra