Foros del Web » Creando para Internet » CSS »

Problema con Background-size al 100%

Estas en el tema de Problema con Background-size al 100% en el foro de CSS en Foros del Web. Hola a todos, estoy diseñando una Web estilo a la que hay en spotify.com pero tengo un problema con las imágenes del fondo. Básicamente lo ...
  #1 (permalink)  
Antiguo 13/05/2014, 04:46
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Pregunta Problema con Background-size al 100%

Hola a todos, estoy diseñando una Web estilo a la que hay en spotify.com pero tengo un problema con las imágenes del fondo. Básicamente lo que ocurre es que no se muestra bien en las tablets.

Chrome y Firefox las muestran perfectamente en mi PC, pero mi tablet galaxy tab 2 ni siquiera es capaz de mostrarlas, no es que estén desajustadas, es que no se ven. El iPad Air tampoco muestra bien la web que estoy haciendo, en este caso muestra las imágenes del fondo pero las muestra en el tamaño original sin ajustar las dimensiones que especifico en background-size.

Primero he de decir que las imágenes que estoy poniendo de fondo son 4 y no ocupan más de 100kb cada una, por lo que el tamaño no es el problema. Aquí va el código CSS

Código:
#main {
	position:relative;
	width: 100%;
	min-height: 1000px;
	margin: 0;
	padding: 0;
	background: url(../images/fondo.jpg) no-repeat center center fixed;
	-khtml-background-size:cover;  /*  Konqueror */
	-webkit-background-size:cover; /* Webkit */
	-moz-background-size:cover;  /* Firefox */
	-o-background-size:cover;  /*  Opera */
	background-size:cover; /* Resto */
}
También tengo un problema con el Zoom, es decir, cuando se hace zoom en el navegador de mi PC, ya sea en chrome o firefox, la web se desajusta completamente. En la web de spotify no pasa, simplemente se redimensiona el contenido pero las imagenes de fondo siguen ocupando todo el ancho de la pantalla.

¿Alguien que pueda echarme una mano por favor?

Gracias a todos, un abrazo
  #2 (permalink)  
Antiguo 13/05/2014, 04:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con Background-size al 100%

Con ese código y probándolo en un iPad y iPhone se bien.
  #3 (permalink)  
Antiguo 13/05/2014, 05:11
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Respuesta: Problema con Background-size al 100%

Hola pzin y gracias por responder. Pues en el ipad Air y en la versión anterior que también lo he comprobado no se ve. Además ya te digo que en Samsung Galaxy Tab 2 es que ni cargan. Además tengo el problema del zoom, si alguien pude entrar en la web de spotify y reducir el zoom al mínimo se dará cuenta de lo que digo, las imágenes siguen ocupando todo el ancho de la pantalla, aunque el contenido se reduce.

¿Alguna otra idea?

Gracias de nuevo pzin :)
  #4 (permalink)  
Antiguo 13/05/2014, 05:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con Background-size al 100%

La idea era que pusieras un ejemplo funcional donde se viera ese problema, ya que con ese código no es el caso.
  #5 (permalink)  
Antiguo 13/05/2014, 07:18
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Pregunta Respuesta: Problema con Background-size al 100%

Hola de nuevo pzin. No copio todo el código de la web porque sería demasiado, explico por encima como está estructurada (omito cosas como el menu, la sección head y demás)

La estructura es bastante simple, básicamente cuenta con 4 secciones que se muestran en la misma página con su correspondiente div. Dicha div la ajusto para que ocupe el 100% del ancho de la pantalla mediante CSS, y el alto lo calculo mediante javascript dependiendo del alto que tenga la div del contenido que va dentro de cada sección.

Ejemplo html:

Código HTML:
<body>
<div id="primera_seccion_contenedor">
  <div  class="contenido">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

<div id="segunda_seccion_contenedor">
  <div  class="contenido">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

<div class="contenido">
  <div id="contenido_tercera_seccion">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

<!-- etc... -->
</body> 
Como puedes observar la estructura básica es muy simple, en cada div contenido de la sección van las correspondientes imágenes, parrafos, etc. Cada contenedor es el encargado de mostrar la imagen de fondo. El CSS:

Código:
body {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*Dejo el CSS para el contenedor de la primera sección, las demás son iguales solo que cambia
  la imagen del fondo */

#primera_seccion_contenedor {
	position:relative;
	width: 100%;
	min-height: 800px;
	margin: 0;
	padding: 0;
	background: url(../images/fondo.jpg) no-repeat center center fixed;
	-khtml-background-size:cover;  /*  Konqueror */
	-webkit-background-size:cover; /* Webkit */
	-moz-background-size:cover;  /* Firefox */
	-o-background-size:cover;  /*  Opera */
	background-size:cover; /* Resto */
}


/*Ahora la div que muestra el contenido, todas son iguales
 Básicamente lo que quiero es que esta div ocupe todo el ancho de la pantalla y se situe en la parte inferior del div padre, de esta forma consigo que se muestre la imagen del fondo del contenedor y haga un efecto parecido al que ando buscando*/

.contenido {
   position: absolute;
   bottom: 0%;
   width: 100%;
   padding-bottom: 100px;
   height: auto;
   margin: auto;
   background-color: rgba(255,255,255, 0.9);
   color: #333;
   box-shadow: 0 0 10px #000;
   border-bottom: 1px solid #999;
}
El diseño de la web que estoy haciendo es bastante más complejo, pero esa es la estructura básica. Y lo que falla es la imagen de fondo que hay en cada contenedor, como he dicho antes, o porque no se redimensiona correctamente en los iPad, no se muestra en mi tablet Android y porque al reducir el zoom desde mi navegador del PC, las secciones de contenido dejan de ocupar todo el ancho de la ventana.

A ver si alguien me puede guiar un poco porque no encuentro el fallo. Sé que puedo usar media queries para especificar otros fondos con la resolución apropiada para las tablets, pero eso no resuelve ni el problema del zoom ni porqué no se ve en mi tablet con Android.

Un abrazo y perdón por escribir tanto.
  #6 (permalink)  
Antiguo 13/05/2014, 07:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con Background-size al 100%

¿Y estás usando la meta-etiqueta viewport?
  #7 (permalink)  
Antiguo 13/05/2014, 07:31
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Respuesta: Problema con Background-size al 100%

Si, tengo puesto:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  #8 (permalink)  
Antiguo 13/05/2014, 07:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con Background-size al 100%

Pues yo ejecuto eso en iOS y se ve bien.

¿No lo tienes subido a algún sitio? A ver si es alguna otra cosa.
  #9 (permalink)  
Antiguo 13/05/2014, 07:47
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Respuesta: Problema con Background-size al 100%

No, ahora mismo solo lo tengo en local. Pero lo visualizas desde un iPad?

Gracias de nuevo
  #10 (permalink)  
Antiguo 13/05/2014, 07:51
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con Background-size al 100%

Cita:
Iniciado por rubiomike Ver Mensaje
No, ahora mismo solo lo tengo en local.
Prueba a ponerlo en jsfiddle, codepen o alguno de esos. Al menos para reproducir el problema.

Cita:
Iniciado por rubiomike Ver Mensaje
Pero lo visualizas desde un iPad?
Si. ¿Tú lo ves mal con el enlace que puse?
  #11 (permalink)  
Antiguo 15/05/2014, 08:42
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 14 años, 1 mes
Puntos: 3
Respuesta: Problema con Background-size al 100%

Bueno pues pongo lo que he encontrado después de mucho leer y probar. Al parecer el problema está en que los iPad, y creo que también el resto de dispositivos móviles, no pueden implementar la propiedad background-attachment:fixed, y por lo tanto al visualizarlo sobre una tablet o dispositivo móvil no se ve correctamente.

La solución sería utilizar media queries para cambiar dicha propiedad con el valor scroll. De esta forma se visualizan las imágenes del fondo aunque sin el efecto que se consigue en navegadores de PC.

Pero aún sigo sin entender como hacen para que la div principal mantenga las dimensiones al reducir el zoom al mínimo, supongo que será mediante el uso de Javascript, si encuentro la solución la pondré aquí por si a alguien le sirve de ayuda.

Un abrazo
  #12 (permalink)  
Antiguo 01/07/2015, 12:03
 
Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Problema con Background-size al 100%

Hola, tengo un problema similar, pero directamente no puedo ver las imágenes de fondo que puse en un section cuando intento ver la página en el celular.

Este es el código que uso:

.slide{
background-image: url(images/teclado.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 400px;
text-align: center;
vertical-align: middle;
padding-top: 80px;

Etiquetas: ancho, background, contenido, tamaño, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:30.