Fondos

facurouss · #1 (**permalink**) 25/02/2011, 07:52

Bueno que tal?.
Mi duda es la siguiente
Estoy diseñando webs y bueno tengo problemas con los fondos ya que no se en que tamaños hacerlos para que esten bien en cualquier resolucion, ahora tengo que hacer un fondo para que ocupe todo el navegador en que tamaño y que mas debo aplicar para que quede bien?

tresj · #2 (**permalink**) 25/02/2011, 10:04

Tendrás que dar a la imagen un tamaño grande para asegurarte de que no pixele en monitores de alta resolución. Es importante que la optimices bien para que no pese demasiado, intenta no pasar de de 180k por ejemplo, cuanto menos pese mejor.
También las preocupaciones por este tema tienen que ir en función del perfil de usuarios que vayan a visitar la página, si son diseñadores y demás ten por seguro que las resoluciones de pantalla serán grandes, depende. Si el fondo se ve bien a 1200 X 800 ya tienes mucho ganado.
Te dejo un link interesante respecto a las distintas resoluciones:
http://www.desarrolloweb.com/de_inte...2011-4792.html
saludos

cristian_cena · #3 (**permalink**) 26/02/2011, 05:32

Hola facu,

Este fondo se deformará adaptándose al 100% tanto de alto como de ancho de la ventana del navegador.

<head>
<style type="text/css">
*{margin:0; padding:0;}
#contenedor{
position:relative; top:0; left:0; width:960px; margin:0 auto; z-index:2;
}
</style>
</head>
<body>
<img src="http://www.forosdelweb.com/f53/fondos-889651/ ... ruta de la imagen ..." width="100%" height="100%" style="postion:fixed; top:0; left:0; z-index:1;">
<div id="contenedor"> .. cabecera, cuerpo y pie de tu página </div>
</body>

Pero puedes poner solo el ancho al 100% y diseñar la imagen lo suficientemente alta como para que sobre por debajo.
(mira el link de resoluciones que compartió tresj)
<img src="http://www.forosdelweb.com/f53/fondos-889651/ ... ruta de la imagen ..." width="100%" style="postion:fixed; top:0; left:0; z-index:1;">

O bien puedes diseñar una imagen png que funda a transparente en por ejemplo el lado derecho y el lado inferior y meter esta imagen con background-image en una capa y usar un patron o color de fondo en el body, de manera tal que el color de fondo se fusione con la transparencia del png.

Estas son las maneras que conozco, pero seguramente debe haber otras.

Un saludo

facurouss · #4 (**permalink**) 28/02/2011, 18:48

Muchas gracias chicos :)