fit - tamaño de fondo: la cubierta no funciona en retrato en una tableta Android
css background image size to fit (6)
Estoy usando la propiedad de background-size para una imagen de fondo de ancho completo y alto, pero tengo problemas para cubrirla por completo en Chrome en una tableta Nexus7 en la vista vertical. Solo cubre el ancho y no la altura, es decir, hay alrededor de 200px de espacio en blanco debajo. Sin embargo, cuando veo el sitio en el escritorio de Chrome (o cualquier otra cosa) y en un monitor vertical para emular las dimensiones del retrato, no hay problema.
¿Alguien tiene una solución?
CSS:
html {
background: url(/images/post_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''/images/post_bg.jpg'', sizingMethod=''scale'')";
}
Captura de pantalla de retrato:
Bueno, puedo encontrar otra solución: la agregué al cuerpo y todo lo que tiene que cuidar es que el archivo adjunto de fondo sea la última regla:
trabajos:
body {
height:100%;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
}
no funciona
body {
height:100%;
width:100%;
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
background-position: center center;
}
Es realmente una lástima, que las llamadas telefónicas son, en general, un poco falsa ...
Creo que puedes solucionarlo definiendo 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
He encontrado otras soluciones usando algo de bit jquery. La solución se basa en la suposición de que estamos usando una imagen en dimensión / proporción del paisaje para el fondo.
paso1: compare la "altura de la ventana" y la "altura del contenido de la página"
Paso 2: si "altura de la ventana" es menor que "altura del contenido de la página"
paso3: aplicar esto a la etiqueta del cuerpo
HTML {
<body style="background-size: auto ''page content height''; background-attachment: scroll;">
}
guión
var wHeight = $(window).height();
var bodyHeight = $(''page-content-element'').height();
if(wHeight < bodyHeight){
$(''body'').attr(''style'', ''background-size: auto ''+ (bodyHeight*1.1) +''px;background-attachment: scroll;'');
}
else{
$(''body'').removeAttr(''style'');
}
llamar esto en la carga de la página y cambiar el tamaño de la ventana
Proporcionaré la solución que encontré en caso de que alguien se encuentre con esto en el futuro. En lugar de usar una imagen de fondo, utilicé un <img> :
HTML:
<img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">
CSS:
#full_bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
width: 100%;
}
@media screen and (max-width: 1024px) {
#full_bg {
left: 50%;
margin-left: -512px;
}
}
Esto funcionó en todos los navegadores y en dispositivos móviles. Encontré la solución here .
Sé que ha pasado mucho tiempo desde que se hizo la pregunta, pero creo que encontré la respuesta. Para mí, el tamaño de fondo: la cubierta funciona en el navegador Android y Android Chrome si omites el "fijo" en las instrucciones CSS de fondo. Después de algunas pruebas, funciona para mí haciendo que la imagen sea el fondo de una DIV:
#yourDivSelectorHere {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
background-image: url(/img/backgrounds/1.jpg) ;
background-repeat:no-repeat;
background-position: center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
El DIV está en sí mismo fijo en su posición (a diferencia de la imagen de fondo), tiene un ancho y una altura de 100%, y se coloca en la parte posterior de todo. Es un pequeño esfuerzo extra en lugar de simplemente agregar la imagen de fondo a HTML o BODY, pero para mí funciona en todos los navegadores que he probado hasta ahora (FF, Chrome, IE8, IE9, Safari), en iPad2 y Android Chrome y Navegador de Android.
Usa el fondo HTML en lugar del cuerpo y dale una ''altura: 100%''
html {
height:100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}