¿Cómo funcionan este tipo de Backgrounds?

[SI TAN SOLO TUVIERA]

Hola nuevamente

Ultimamente he visto que varias paginas usan este tipo de BACKGROUNDs que son una imagen, por lo general de 1600 pixeles o mas, pero la cual se adapta a la resolucion de la pantalla, sirven de fondo, y a la vez sirven de bordes para la estructura de la pagina.

Estaba pensando que es algo asi como un background con position center, pero lo que no entiendo es como hacen para que se adapte a toda las resoluciones y los bordes siempre funcionen

Pongo un ejemplo de una pagina de estas http://www.music-musica.com/

Podria alguien contarme como funciona la cosa ahi? o donde encuentro mas informacion de como hacer esto?

GRACIAS!

[PatomaS]

Hola

No puedo responder por todos los casos que hayas visto, pero en casos como ese, basta con que la imagen esté posicionada en el centro de la pantalla, de esa manera hay una zona equidistante a cada lado sin importar la resolución mientras no sobre pases las dimensiones de la imagen.

Claro que una pantalla más grande lo que tendrá es más zona gris y una más pequeña tendrá menos.

Felicidad

[SI TAN SOLO TUVIERA]

Grax Patomas, si entiendo eso de que es un background centrado repetido en Y, pero por ejemplo, como hace la proporcion ahi, como hace el webmaster para saber que digamos el fondo lo tenia que hacer de 2000px de largo para que el hueco que deja en el centro siempre se ajuste al diseño o el contenido del centro sin importar la resolucion del usuario?

Mejor dicho como mide uno ahi para hacer eso, y saber cuando espacio dejar en el centro del background que es donde va la pagina?

Gracias.

[jam1138]

Iniciado por SI TAN SOLO TUVIERA

[...] como hace la proporcion ahi, como hace el webmaster para saber que digamos el fondo lo tenia que hacer de 2000px de largo para que el hueco que deja en el centro siempre se ajuste al diseño o el contenido del centro sin importar la resolucion del usuario?
[...]

El centro, tanto del contenido como el de la imagen, tienen un ancho determinado. De ahí extiendes la imagen "hacia las orillas" con toda libertad... es simple.

La imagen y el contenido siempre estarán centrado, sin proporción, estarán a su 100% por lo "el centro" ocupará el mismo ancho que le diste, no hay falla... la extensión de la imagen hacia los lados es para monitores anchos... el centro, en cualquier resolución, siempre ocupará un número específico de pixeles.

Espero haberme explicado. Saludos

[SI TAN SOLO TUVIERA]

Entiendo! pero entonces la pagina tendria que estar hecha toda en porcentajes, o por lo menos el div principal que encierra toda la pagina?, funcionaria igual ese fondo con el div principal si este tuviese una medida estatica, de digamos 750px o algo asi?

[jam1138]

Iniciado por SI TAN SOLO TUVIERA

Entiendo! pero entonces la pagina tendria que estar hecha toda en porcentajes, o por lo menos el div principal que encierra toda la pagina?, funcionaria igual ese fondo con el div principal si este tuviese una medida estatica, de digamos 750px o algo asi?

... es todo lo contrario a como lo entendiste :-/.

Abre la página que dejas... redimenciona tu ventana, cambia el ancho a como te de la gana y observa...
- ¿Qué pasa con el contenido?
- ¿Cómo debería comportarse una medida en porcentajes?
- ¿Cómo debería comportarse una medida definida en pixeles?
- ¿Cambia el ancho del contenido?
- ¿Cambia el ancho de la imagen?

Entonces, analiza... conclusión: contenido centrado con un ancho estático, imagen centrada con un área central estática (de acuerdo al contenido). Es lo más simple... creo que te autogestionas para no creerlo ^^.

[:.SMITEXX.:]

Mira, esta es la url de la imagen de fondo. Alla tu si quieres poner una tan grande.

http://www.music-musica.com/images/fdweb.gif

Yo, la hubiera hecho sin tanto espacio a los lados, eso color de fondo en css del body. La imagen la alinearia al centro y top como background, y que se repita en y.

Ojalá te sirva...

Chau

[SI TAN SOLO TUVIERA]

Gracias jam, mejor dicho, voy a probarlo en la practica, pero si ya te entiendo!

smitexx lo que dices ya lo habiamos hablado antes arriba, de todos modos grax por el aporte.