[SOLUCIONADO] Problema con imagen

agami · #1 (**permalink**) 05/09/2012, 19:49

Hola de nuevo compañeros de foros del web! Haciendo pequeñas pruebas para aumentar mis conocimientos de CSS (bastante basicos por cierto) me encuentro con que tengo una imagen de fondo y un login con el siguiente estilo:

/* CSS Document */

.imagenfondo {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
float:left;
}

body {
width:100%;
height:100%;
}

Y el HTML es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<title>Pagina en blanco</title>
</head>

<body>

<div>
<form method="post" action="php/login.php">
Nombre: <input type="text" name="nombre">
Password: <input type="text" name="pass">
</br>
¿Aun no estas registrado? <input type="checkbox" name="login">
</form>
</div>
<img class="imagenfondo" src="pics/UnderConstruction.jpeg" />

</body>
</html>

El problema es que al hacer la imagen para que se vea a pantalla completa me tapa el login, y lo que quiero es que el login salga por encima de la imagen.

Alguna idea del estilo q debo darle al login para que se vea por encima?

Muchas gracias por adelantado a todas las posibles respuestas qur me puedan dar.

pedrogp9693 · #2 (**permalink**) 05/09/2012, 20:23

Debes de establecer el z-index, por ejemplo:

Código CSS:

Ver original.imagenfondo {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
float:left;
z-index:-1;
}

sebastopols · #3 (**permalink**) 05/09/2012, 20:31

Una forma sencilla de poner elementos encima de otros es usar z-index, podés poner en un div la imagen y en otro div tu login, los valores que uses para lo que quieras que esté debajo deben ser menores a los de lo que quieras arriba, ej.:

Cita:

.divLogin{
position:absolute;
z-index:10;
}

.divFotoBg{
position:absolute;
z-index:0;
}

... esta es una solución posible, saludos.

sebastopols · #4 (**permalink**) 05/09/2012, 20:37

Bueno ya te explicó también "pedrogp9693" , guardó antes

agami · #5 (**permalink**) 05/09/2012, 23:12

Muchas gracias compañeros!

Me estaba volviendo loco y no cai en el z-index! Para la proxima lo tendre en cuenta!

Muchas gracias de nuevo!

Karma +1 ;)