Acá está la solución: http://jsfiddle.net/HsBXW/
Paso a explicarte el motivo por el cual no te tomaba el height al 100% y tenías el espacio blanco alrededor:
Pregunta 1: Cita: porque el height cuando lo pongo en 100% no es aceptado?
Respuesta: Esto se debe a que el elemento padre de div.main al que le asignás la altura al 100% (body) no estaba situado al 100%. Por ende, sólo ocupaba lo que el browser había dispuesto para body, en este caso en función del contenido.
Para solucionarlo, basta con poner:
Código:
html, body { height: 100%; }
Cita: porque hay un fondo blanco alrededor de la imagen
Respuesta: Esto se debe a que los navegadores disponen de su propia hoja de estilos denominada User Agent Stylesheet. Esta hoja de estilos, tiene sus propias reglas CSS. Una de ellas es establecer el margen del body a 8px (por lo menos en Chrome que es el browser que siempre uso).
Por tal motivo, para eliminar este margen uno debe "resetear" esos estilos. Cómo hacerlo? Podés hacerlo en el mismo código CSS donde se aplican tus estilos generales o bien en una hoja de estilo aparte (ojo que tendrás un acceso al servidor más) a la que podemos llamar reset.css
En mi caso, tengo el código comentado que correspondería al reset.css como
/* Reset CSS */
Y los valores que he puesto son los siguientes:
Código:
body, div, input {
margin: 0;
padding: 0;
}
Un saludo,
Leo!