Imagen que ocupe el alto de la pantalla independientemente de la resolucion

azel42 · #1 (**permalink**) 25/01/2013, 10:43

Hola de nuevo, he trasteado un poco con este asunto utilizando CSS pero los consejos por ahi suelen ser para poner un background, yo necesito una imagen que ocupe todo el alto de la pantalla, independientemente de la resolucion de quien visite la web, y esta no es una imagen de fondo si no que está encima.

He leído lo del truco <body style="height:100%;"> y no me ha ayudado, añado esto y a la imagen también le pongo un style="height:100%;"> y queda casi perfecta, pero hay ahi un pequeño scrolling que implica que no se ha adaptado realmente al 100%

Además en relacion [URL="http://www.forosdelweb.com/f53/posicionando-imagen-centro-con-css-1033879/"]a un post que puse antes[/URL] he descubierto (aunque lo marque como solucionado) que el posicionamiento no funciona en IE, y que debe ser esta una cuestion de incompatbilidad del susodicho navegador, asi que si alguien quiere echar un vistazo alli tambien, para no preguntarlo en otro post, estare agradecido.

abimaelrc · #2 (**permalink**) 25/01/2013, 11:10

Primero debes usar un reset para eliminar los margin y padding de html, body, algo así

Código CSS:

Ver originalhtml, body{
    padding: 0;
    margin: 0;
}

Luego puedes hacer lo del height.

azel42 · #3 (**permalink**) 25/01/2013, 11:25

Cita:

Iniciado por abimaelrc

Primero debes usar un reset para eliminar los margin y padding de html, body, algo así

Código CSS:

Ver originalhtml, body{
    padding: 0;
    margin: 0;
}

Luego puedes hacer lo del height.

Probe a poner eso y ha funcionado a la perfección, ¡muchas gracias!

moro666 · #4 (**permalink**) 26/01/2013, 05:50

Cita:

Iniciado por abimaelrc

Primero debes usar un reset para eliminar los margin y padding de html, body, algo así

Código CSS:

Ver originalhtml, body{
    padding: 0;
    margin: 0;
}

Luego puedes hacer lo del height.

Bueno, como nadie suele querer margin ni padding de "serie" te recomiendo esto:

Código CSS:

Ver original* {
    padding: 0;
    margin: 0:
}

Asi te aseguras de que no te pase de nuevo alguna cosa parecida!