Fondo-tamaño: cubierta de repente dejó de funcionar en Google Chrome?
¿Alguien más tiene este problema? Creo sitios web para ganarme la vida, y algunos emplean el uso de la propiedad css background-size: cover. De repente hace aproximadamente 1 semana, todos los sitios con esta propiedad ya no se muestran a la derecha en Google Chrome. (todos los demás navegadores funcionan bien.¿Alguien más está experimentando esto? ¿Es solo MI google Chrome o ha cambiado algo? Porque los fondos se mostraban correctamente hasta hace aproximadamente una semana, y no cambié nada. Ellos sólo dejó de mostrarse correctamente, aparentemente de la nada....
11 answers
Práctica recomendada: establezca siempre background-image primero y luego background-size.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-04 19:54:59
¡Solo necesita usar !importante :
background-size: cover !important;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-10 13:06:19
Me encontré con este problema en Chrome, también.
Ninguna de las respuestas anteriores funcionó para mí. Específicamente, estaba tratando de establecer el fondo del elemento <body> a background-size: cover. Sin embargo, la imagen de fondo nunca se extendería verticalmente para llenar la página.
Después de algún ensayo y error, descubrí que establecer el ancho y alto del elemento <html> al 100% solucionó el problema en Chrome. (Por si sirve de algo, cambiar el ancho y la altura del elemento <body> parecía no tener ningún efecto.)
En mi css, tengo las siguientes reglas para solucionar el problema:
html {
width: 100%;
height: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-21 04:07:45
Estaba teniendo el mismo problema de repente w/ no solo GC sino también FF y Opera. estaba usando una función php para extraer imágenes aleatorias para mi fondo y esto es lo que tenía....
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; }
Y HTML/PHP:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
Estuvo trabajando durante algunos días y de repente background-repeat y background-size dejó de funcionar. así que esta mañana me enteré de que los siguientes cambios están funcionando perfectamente para GC (v21), FF (v14), Opera (v12) y Safari (v5.1.7)...todavía no hay suerte w / IE aunque :(
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" />';
Puede ser que sea una solución pésima, pero está funcionando para mí (hasta ahora) espero que esto ayude a alguien:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-06 16:44:49
La siguiente es una solución al problema, pero no será para todos. Estimo que esta solución ayudará a una minoría de las personas que experimentan el problema del autor.
La opción background-size puede dejar de funcionar en chrome si el contenedor es demasiado pequeño, verticalmente, en comparación con la imagen de fondo.
Estaba en una situación en la que tenía que colocar una pequeña porción de una imagen de fondo grande a través de un div que tenía 7 píxeles de altura.
En el Cromo depurador, cambiando la altura div a 9 píxeles "encajó" el tamaño del fondo en su lugar.
Mi solución final fue reestructurar mis divs para que no me encontrara con este problema.
Para ver si esta solución le ayudará, en el depurador de Chrome, ampliar su div. Si, en algún momento, el tamaño del fondo encaja en su lugar, entonces sabes que este es el problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-06 16:25:43
Vieja pregunta pero tiene un problema similar y resultó que necesitaba agregar y a los div vacíos a los que estaba aplicando background-size: cover.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-17 17:39:59
Debes hacer hacks CSS para google chrome.
Use body:nth-of-type(1) .elementOrClassName{property:value;}
Solo para google chrome.
Para su caso,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-04 21:21:26
Prueba esto background-size: contain;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-04 19:51:42
Para mí, siguiente trabajado para 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');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-23 06:52:39
Puede solucionar el problema estableciendo la altura de la etiqueta. Por ejemplo, si tiene una página que tiene una imagen de fondo, establezca la altura de las etiquetas html y body en el CSS, de la siguiente manera:
html { height:100%; min-height:100%; } body{ min-height:100%; }
Espero que esto ayude
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-09 16:50:44
En lugar de usar:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Uso:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-04 13:13:44