Fondo adaptable según la pantalla y más

[Benderzuelo]

Buenas noches amigos/as

tengo un pequeño problema y es que estoy haciendo mi primera web responsiva, os adjunto 2 capturas para que veáis como se me ve la versión web y como se me vé la versión móvil.





La versión web el fondo se adapta y la móvil no, es más en la versión móvil el fondo no se adapta a como es la pantalla, en el css le he puesto que el height y el width sea 100% y no ocupa 100% del alto, en la captura veréis que se ve una parte azul con 2 flechas, pues esa parte azul es de otra pantalla que solo debería verse al pulsar la flecha y hace un efecto deslizante y cambia de pantalla.

Todas las pantallas que se deslizan hacia abajo les ocurre esto, se quedan cortas o sea que no ocupan el 100% de alto, sin embargo las que se desplazan en horizontal si se adaptan.

Que hago mal?

[codeams]

De acuerdo este es un problema comun que se puede solucionar con background-size. Pero esta propiedad no es soportada por todos los navegadores moviles como podrás ver en caniuse.com.

Sigamos los pasos de Chris en css-tricks.com utilizando CSS3:

Código CSS:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}
 

Esto hará que la imagen ocupe toda la pantalla y que además se centre, casi como si fuese un fondo de escritorio de windows.

Puedes ver muchos metodos de realizar esto sin utilizar css3 en este articulo de css-tricks.com (en inglés).

[pzin]

Está soportado en móviles con algunos "peros". Lo que llaman soporte parcial.

[Benderzuelo]

Iniciado por codeams

De acuerdo este es un problema comun que se puede solucionar con background-size. Pero esta propiedad no es soportada por todos los navegadores moviles como podrás ver en caniuse.com.

Sigamos los pasos de Chris en css-tricks.com utilizando CSS3:

Código CSS:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}
 

Esto hará que la imagen ocupe toda la pantalla y que además se centre, casi como si fuese un fondo de escritorio de windows.

Puedes ver muchos metodos de realizar esto sin utilizar css3 en este articulo de css-tricks.com (en inglés).

Muchas gracias por tu aportación, precisamente lo tengo tal cual tu me has mostrado, y es así como me da los problemas...

Gracias Pzin por tu respuesta tambien,

alguien mas me puede echar un cable?

[codeams]

¿Y que tal si utilizas un poco de javascript?

[Benderzuelo]

Iniciado por codeams

¿Y que tal si utilizas un poco de javascript?

Voy muy flojo de Javascript.

Mira lo que me ocurre en un dispositivo tablet que le puedes quitar zoom.



Ocurre que se ven todas las pantallas tal cual estan en el css, en el ordenador como tiene overflow hidden y ademas no me ocurre esto...

No se como solucionarlo..
A alguien le ha pasado??

Gracias

[pzin]

Publica algo de código o la URL si lo tienes en algún sitio. Es que con imágenes realmente no se puede ver nada.

[Benderzuelo]

Iniciado por pzin

Publica algo de código o la URL si lo tienes en algún sitio. Es que con imágenes realmente no se puede ver nada.

Llevas razón, lo que si es posible hay que verlo tanto en un dispositivo movil como en un ordenador, al quitar zoom en movil actua como la captura de arriba y si es pc actua distinto, se redimensina todo menos las imagenes :(

la url es http://www.desarrollos-fran.tk

Muchas gracias, a ver si hay suerte

[pzin]

Pues no veo que sea un problema de background-size sino del tamaño de los contenedores. Al verlo en el ordenador y reducir el ancho del navegador ocurre la misma cosa.

Como está todo un poco loco el tema del posicionamiento, con posicionamiento absoluto y demás yerbas extrañas, vaya a saber si JavaScript también...

Si quieres que cada sección ocupe el total de la pantalla, del viewport, entonces simplemente haz que body mida el 100%*N, donde N es el número de secciones, y luego cada sección que ocupe 100%/N, ¿no?

Normalmente en sitios con diseño responsivo se suele desactivar el zoom del móvil, no debería de servir para mucho en sitios así.

[Benderzuelo]

Iniciado por pzin

Pues no veo que sea un problema de background-size sino del tamaño de los contenedores. Al verlo en el ordenador y reducir el ancho del navegador ocurre la misma cosa.

Como está todo un poco loco el tema del posicionamiento, con posicionamiento absoluto y demás yerbas extrañas, vaya a saber si JavaScript también...

Si quieres que cada sección ocupe el total de la pantalla, del viewport, entonces simplemente haz que body mida el 100%*N, donde N es el número de secciones, y luego cada sección que ocupe 100%/N, ¿no?

Normalmente en sitios con diseño responsivo se suele desactivar el zoom del móvil, no debería de servir para mucho en sitios así.

El problema es que la estructura es así, el css venía de un ejemplo con el ipo de movimiento que hace de deslizar...

No se que hacer, si no consigo hacer esto voy a perder el proyecto :(

Cuando dices de poner el 100%*N quieres cir que ponga tal cual en el css 100%*5 ? y luego quito lo de position absolute? o a que te refieres?

P.D El Javascript en teoria esta bien y hace lo que dice el ejemplo.

Saludos

[codeams]

Si justamente. Utilizo muchísimo esa técnica en sitios web moviles.

Un div contenedor que tenga todas las secciones que mida 100%*n y que cada seccion mida 100%/n. Por ejemplo un div que mida 400% tiene espacio para 4 secciones. Cada una debe medir 25%. Y cuando muevas el left del div contenedor con valores negativos entonces verás otra seccion.

Por ejemplo si el div contenedor tuviese -200% como valor de la propiedad left entonces podrías ver la tercera seccion ocupando la totalidad de la pantalla mientras que las demás secciones no estan visibles puesto que el div contenedor tiene overflow:hidden;

Este es un proyecto que aún no lanzo pero quizá te pueda dar una idea:
labs.codeams.tk/sparky. (licencia del sitio web)

[Benderzuelo]

Muy interesante, muchas gracias, voy a estudiar tu proyecto :),

Ya puestos y aunque no tenga nada que ver con el tema, es cierto que éste tipo de webs que estan todas las páginas cargadas pero fuera de la pantalla no se pueden posicionar bien? porque google lo ve como que estas ocultando info?

[codeams]

en script.js, en las últimas líneas puedes apreciar como yo aplico los tamaños que comentaba pzin mediante javascript, segun la cantidad de ventanas que desee mostrar (mismas que defino al principio como la variable ventanas).

[Benderzuelo]

Justo ahora mismo estaba viendo eso. :)