Les Media queries et les images d'arrière-plan
J'ai un div
<div id="page">
</div>
Avec le code 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 quand je redimensionner mon navigateur, je vois le "mobile" d'arrière-plan (bon), mais si je revenir en arrière et faire de mon navigateur grand, mon dernier "gros" arrière-plan ne sont pas toujours réapparaître.
C'est un problème intermittent mais il arrive assez souvent que je pense que je devrais y remédier.
Est-il un moyen de contourner cette "image d'arrière-plan ne figurant pas" problème ou un moyen de redimensionner les images d'arrière-plan, de sorte que la requête de média "rétrécit" l'image d'arrière-plan pour l'adapter à la nouvelle taille? Autant que je sache, il n'existe pas (généralisée) de manière à modifier la taille d'une image d'arrière-plan...
Vous le savez probablement déjà ce lien: css-tricks.com/how-to-resizeable-background-image (re modification de la taille d'une image d'arrière-plan).
Quand je le fais ne pas redimensionner l'image...qui est je viens de voir la partie de l'image, pas l'image de la taille vers le bas
intéressant, mais ce n'est pas css background: url...c'est une balise d'image du style..peut l'essayer.
Jetez un oeil à la
background-size
de la propriété. C'est du CSS3 mais assez bien pris en charge. L'un de ses valeurs possibles est cover
. C'est expliqué dans le premier lien de l'article que j'ai lié. En passant, quel navigateur utilisez-vous?OriginalL'auteur redconservatory | 2012-02-29
Vous devez vous connecter pour publier un commentaire.
Selon test:
Si vous voulez seulement la version de bureau de l'image à télécharger sur le bureau...
et seulement le mobile de l'image à télécharger sur l'appareil mobile -
Vous devez utiliser un
min-width
déclaration de spécifier une durée minimale largeur du navigateur pour l'image du bureau...et un
max-width
pour le mobile de l'image.De sorte que votre code serait:
<meta>
balise de façon appropriée, quelque chose comme:<meta name="viewport" content="width=device-width, user-scalable=no">
d'avance sur le reste de la CSS.Il y a un problème avec ceci: Firefox et Chrome télécharge la taille d'image plus petite, trop, lorsque la fenêtre est redimensionnée (pour une taille plus petite), par exemple, vous commencez avec la plus grande taille de l'écran (largeur >= 601px) et le navigateur télécharge l'image plus grande; puis vous redimensionner le navigateur de largeur <= 600px et votre navigateur va télécharger l'image plus petite, trop, ce qui est totalement inutile, parce que vous avez déjà la grande résolution et maintenant vous double de téléchargement la plus petite, trop. Complètement à l'encontre de la logique des choses (économie de bande passante en ne téléchargeant que la plus grande taille dont vous avez besoin).
vous ne pouvez pas que le comportement, mais il n'est pas illogique. Le navigateur ne sait pas que les deux images ne sont que des résolutions différentes de la même image, beaucoup de gens l'affichage images en fonction de si il est mobile ou de bureau. Pour ma part, je préfère ce comportement.
OriginalL'auteur Danield
Le code fourni est un peu buggé, ce qui est probablement un bon endroit pour commencer actuellement vous avez
La media query partie n'est pas complète. Vous avez encore besoin de fournir le sélecteur CSS que vous avez utilisé à l'extérieur de la requête:
Commencer avec ça, et laissez-moi savoir si cela résout des choses.
OriginalL'auteur ckaufman
veuillez utiliser
OriginalL'auteur Tushar Dhingra