web-dev-qa-db-fra.com

Taille de l'arrière-plan: la couverture a soudainement cessé de fonctionner dans Google Chrome?

Est-ce que quelqu'un d'autre a le même problème? Je crée des sites Web pour gagner ma vie, et certains utilisent l’utilisation de la propriété css background-size: cover. Tout à coup, il y a environ une semaine, tous les sites dotés de cette propriété ne s'affichent plus directement dans Google Chrome. (Tous les autres navigateurs fonctionnent bien.) Quelqu'un d'autre en est-il victime? Est-ce juste mon google chrome ou quelque chose a changé? Parce que les arrière-plans s’affichaient correctement jusqu’à il ya environ une semaine, et je n’ai pas changé rien. Ils ont juste cessé de s'afficher correctement, semblant sortir de nulle part ....

google-chromecss3csscover
28
malfy

Meilleure pratique: définissez toujours l’image d’arrière-plan en premier, puis la taille de l’arrière-plan. 

29
malfy

Il vous suffit d'utiliser! Important: 

background-size: cover !important;
14
gregs67

Je viens également de rencontrer ce problème dans Chrome. 

Aucune des réponses ci-dessus n'a fonctionné pour moi. Plus précisément, j’essayais de définir l’arrière-plan de l’élément <body> sur background-size: cover. Cependant, l'image d'arrière-plan ne s'étendrait jamais verticalement pour remplir la page.

Après quelques essais et erreurs, j'ai constaté que le fait de régler à 100% la largeur et la hauteur de l'élément <html> résolvait le problème dans Chrome. (Pour ce que cela vaut, changer la largeur et la hauteur de l'élément <body> semblait n'avoir aucun effet.)

Dans mon css, j'ai les règles suivantes pour résoudre le problème:

html {
  width: 100%;
  height: 100%;
}
13
wrydere

Vous devez faire des hacks CSS pour Google Chrome.

Use body:nth-of-type(1) .elementOrClassName{property:value;}

seulement pour google chrome.

pour votre cas,

nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
1
Josua Marcel Chrisano

J'avais soudainement le même problème avec GC, mais aussi FF et Opera. J'utilisais une fonction php pour extraire des images aléatoires pour mon arrière-plan et c'est ce que j'avais ....

CSS:

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  background-repeat: no-repeat; 
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

et HTML/PHP:

$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';

cela fonctionnait depuis quelques jours et tout à coup, background-repeat et background-size ont cessé de fonctionner. Donc ce matin, j’ai découvert que les modifications suivantes fonctionnaient parfaitement pour GC (v21), FF (v14), Opera (v12) et Safari (v5.1.7) ... toujours pas de chance avec/IE bien que: (

CSS:

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

HTML/PHP:

    $result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';

peut-être que c'est une solution moche mais cela fonctionne pour moi (jusqu'à présent) espérons que cela aide quelqu'un :)

1
AlwaysANovice

Ancienne question, mais problème similaire, il s’est avéré nécessaire d’ajouter un &nbsp; au div vide auquel j’appliquais background-size: cover.

1
Dave Bergschneider

Ce qui suit est une solution au problème, mais ce ne sera pas pour tout le monde. J'estime que cette solution aidera une minorité de personnes confrontées au problème de l'auteur.

L'option background-size peut cesser de fonctionner en chrome si votre conteneur est trop petit, verticalement, par rapport à votre image d'arrière-plan.

J'étais dans une situation où je devais positionner une petite partie d'une grande image d'arrière-plan sur un div de 7 pixels de haut. 

Dans le débogueur de Chrome, la modification de la hauteur de la div en 9 pixels "encliquetait" la taille de l'arrière-plan.

Ma solution ultime était de restructurer mes divs afin de ne pas me heurter à ce problème.

Pour voir si cette solution vous aidera, dans le débogueur de Chrome, agrandissez votre div. Si, à un moment donné, la taille de l'arrière-plan s'emboîte, alors vous savez que c'est le problème. 

1
Brian Webster

Pour moi, la suite a fonctionné pour Chrome, IE 8, IE 9:

.itemFullBg{
background:url('image/path/name.png') no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;      
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
    (src='image/path/name.png',sizingMethod='scale');
}
0
Amit Bhagat

Vous pouvez résoudre le problème en définissant la hauteur de la balise . Par exemple, si vous avez une page qui a une image d'arrière-plan, définissez la hauteur des balises html et body dans la CSS, comme suit:

html { height:100%;  min-height:100%;  } body{  min-height:100%;  }

j'espère que cela t'aides

0
Michele Caggiano

Essayez ceci Background-size: contenir;

0
Vinay Mehta