aplicaciones - Tamaño de fondo: ¿la cubierta de repente dejó de funcionar en Google Chrome?
extensiones chrome android (11)
Acabo de encontrarme con este problema en Chrome, también.
Ninguna de las respuestas anteriores funcionó para mí. Específicamente, intentaba establecer el fondo del elemento <body> en background-size: cover . Sin embargo, la imagen de fondo nunca se extendería verticalmente para llenar la página.
Después de algunas pruebas y errores, encontré que establecer el ancho y la altura del elemento <html> en 100% solucionó el problema en Chrome. (Para lo que vale la pena, cambiar el ancho y la altura del elemento <body> parece no tener efecto.)
En mi css, tengo las siguientes reglas para solucionar el problema:
html {
width: 100%;
height: 100%;
}
¿Alguien más tiene el mismo problema? Creo sitios web para ganarme la vida, y algunos emplean el uso de la propiedad css background-size: cover . De repente, hace aproximadamente una semana, todos los sitios con esta propiedad ya no se muestran en Google Chrome. (todos los demás navegadores funcionan bien). ¿Alguien más está experimentando esto? ¿Es sólo MI google chrome o algo cambió? Porque los fondos se mostraban correctamente hasta hace una semana, y no cambié nada. Simplemente dejaron de mostrarse correctamente, aparentemente de la nada ...
Antigua pregunta, pero tiene un problema similar y resultó que necesitaba agregar y A los divs vacíos les estaba aplicando background-size: cover a.
De repente, estaba teniendo el mismo problema w / no solo GC sino también FF y Opera. Estaba usando una función php para extraer imágenes al azar 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 funcionando durante algunos días y, de repente background-repeat background-size dejaron de funcionar. así que esta mañana descubrí que los siguientes cambios funcionan perfectamente para GC (v21), FF (v14), Opera (v12) y Safari (v5.1.7) ... aún no hay suerte con 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 mala solución pero está funcionando para mí (hasta ahora) espero que esto ayude a alguien :)
Debes hacer hacks CSS para google chrome.
Use body:nth-of-type(1) .elementOrClassName{property:value;}
Sólo para google chrome.
para su caso,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
En lugar de usar:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Utilizar:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
Para mí, los siguientes trabajaron 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'');
}
Práctica recomendada: siempre establezca la imagen de fondo primero y luego el tamaño de fondo.
Pruebe este tamaño de fondo: contener;
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, así:
html { height:100%; min-height:100%; } body{ min-height:100%; }
espero que esto ayude
Solo necesitas usar! Importante:
background-size: cover !important;
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 de tamaño de fondo puede dejar de funcionar en cromo si su contenedor es demasiado pequeño, verticalmente, en comparación con su imagen de fondo.
Estaba en una situación en la que tenía que colocar una pequeña parte de una imagen de fondo grande a través de un div que tenía 7 píxeles de altura.
En el depurador de Chrome, el cambio de la altura del div a 9 píxeles "ajustó" el tamaño del fondo en su lugar.
Mi última solución 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, amplíe su div. Si, en algún momento, el tamaño del fondo encaja en su lugar, entonces usted sabe que este es el problema.