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.