[PREGUNTA] ¿Como hacer fondo elástico ó variable según resolución del monitor?

[fastlane]

El ejemplo a citar es este web según la resolución de cada quien así vera mas o menos del fondo del sitio web.

Y la pregunta es de que manera se hace esto?

He buscado en google y he hecho una que otra prueba con la información que he encontrado, pero, según como lo he hecho al verlo en una laptop las imágenes se ven estiradas lo cual no sucede con el ejemplo antes citado.

Desde ya gracias por su ayuda.

[darkness51]

Deberías de ver el código fuente.

Según he visto, lo hacen poniendo el fondo en una tabla y luego con css utilizan porcentajes para definir las propiedades de la tabla, la capa dentro de la que esta la tabla y la imagen.

Creo que a eso se le llama diseño líquido si no me equivoco.

Saludos.

[kerberoz]

Pues mira entrando al codigo y al css de la pagina que mencionas me encontre con esto:

CODIGO HTML

Código: [Seleccionar]

    <div id="backgroundImage">
      <div>
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <img alt="Bg-home" src="/images/bg-home.jpg?1274920164" />

            </td>
          </tr>
        </table>
      </div>
    </div>

CODIGO CSS

Código: [Seleccionar]

html, body, #backgroundImage,
#backgroundImage table, #backgroundImage td {
  height: 100%;
  overflow: hidden;
  width: 100%
}

#backgroundImage div {
  height: 200%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 200%;
  z-index: -200;
}

#backgroundImage td {
  text-align: center;
  vertical-align: middle
}

#backgroundImage img {
  margin: 0 auto;
  min-height: 50%;
  min-width: 50%
}

Crea una pagina web para probar ese codigo.

[wcd]

Amigo, eso se logra con codigo css, te recomiendo buscarte un manual sobre eso.. es muy bonito, creeme que sera lo que se pondra de "moda!" en cuanto a diseño.. y si logras dominar las capas.. hombre.. estas hecho!