Foros del Web » Creando para Internet » CSS »

¿Cómo funcionan este tipo de Backgrounds?

Estas en el tema de ¿Cómo funcionan este tipo de Backgrounds? en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/07/2007, 00:04
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 11 años, 8 meses
Puntos: 3
Pregunta ¿Cómo funcionan este tipo de Backgrounds?

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!
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.

Última edición por SI TAN SOLO TUVIERA; 26/07/2007 a las 08:41
  #2 (permalink)  
Antiguo 26/07/2007, 02:20
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Como funcionan este tipo de Background? no entiendo la verdad.

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 26/07/2007, 08:18
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 11 años, 8 meses
Puntos: 3
Re: Como funcionan este tipo de Background? no entiendo la verdad.

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.
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
  #4 (permalink)  
Antiguo 26/07/2007, 10:18
Avatar de jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 13 años, 4 meses
Puntos: 101
Re: Como funcionan este tipo de Background? no entiendo la verdad.

Cita:
Iniciado por SI TAN SOLO TUVIERA Ver Mensaje
[...] 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
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
  #5 (permalink)  
Antiguo 26/07/2007, 12:04
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 11 años, 8 meses
Puntos: 3
Re: ¿Cómo funcionan este tipo de Backgrounds?

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?
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
  #6 (permalink)  
Antiguo 26/07/2007, 12:15
Avatar de jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 13 años, 4 meses
Puntos: 101
Re: ¿Cómo funcionan este tipo de Backgrounds?

Cita:
Iniciado por SI TAN SOLO TUVIERA Ver Mensaje
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 ^^.

__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
  #7 (permalink)  
Antiguo 26/07/2007, 12:17
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cerca de todo, lejos de la nada.
Mensajes: 82
Antigüedad: 15 años, 1 mes
Puntos: 0
Re: ¿Cómo funcionan este tipo de Backgrounds?

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
  #8 (permalink)  
Antiguo 26/07/2007, 12:32
Avatar de SI TAN SOLO TUVIERA  
Fecha de Ingreso: marzo-2006
Ubicación: Aburrilandia, US
Mensajes: 652
Antigüedad: 11 años, 8 meses
Puntos: 3
Re: ¿Cómo funcionan este tipo de Backgrounds?

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.
__________________
¿Dónde encontrar carros baratos en USA? En Autopten.
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 10:40.