Imagen sobre imagen css

alvaro0022 · #1 (**permalink**) 16/09/2011, 21:59

Saludos;

No puedo solucionar lo siguiente. Colocar una imagen sobre otra mediante css.

esto es lo que quiero:

Que es esta imagen:

Sobre esta: que es el {thumbnail}

Codigo html:

Código:

<div>{thumbnail}</div><div class="thum"></div>
<div class="texto-thum">{image_name}</div>

Codigo css:

Código:

.thum2 {
background-image:	url( "http://www.juegga.com/i/fondo-thums.png" );
height:	127px;
width:	152px;
background-repeat:	no-repeat;
position:absolute;
margin:	0;
padding:	0;
}

.texto-thum {
color:	#FF0000;
font-weight:	bold;
}

C2am · #2 (**permalink**) 16/09/2011, 22:26

Y donde aplicas la clase thum2 ?

dleal100 · #3 (**permalink**) 16/09/2011, 22:56

cuando escribas background-image:url(la_imagen.jpg); no se escribe comillas, eso puede causar errores ala ora de validar tu codigo

Código:

<!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" xml:lang="es" lang="es" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo</title>
<style type="text/css">
#caca{
background-image:url(http://www.juegga.com/i/fondo-thums.png);
background-repeat:no-repeat;
height:	127px;
width:	152px;
padding:6px 5px 5px 6px;
}
</style>

</head>
<body>

<div id="caca">
<img src="http://www.juegga.com/imagen-inferior.png">
</div>
</body>
</html>

C2am · #4 (**permalink**) 16/09/2011, 23:11

Aquí mi solución:

Código HTML:

Ver original<!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=iso-8859-1" />
<title>Documento sin título</title>
<style>
<!-- 
*{  margin:0;
    padding:0;
    }
#cuadro{
    width:152px;
    height:127px;
    position:relative;
    overflow:hidden;
    margin:auto;
    }
#marco{
    position:relative;
    width:152px;
    height:127px;
    background-image: url(images/imagen-superior.png);
    background-repeat: no-repeat;
    background-position: center center;
    z-index:55;
    }
#foto{
    z-index:1;
    position:absolute;
    width:152px;
    height:127px;
    left:0px;
    top:0px;
    }
#foto img{
    width:140px;
    height:120px;
    margin-left:6px;
    margin-top:3px;
    }   
-->
</style>
</head>
 
<body>
 
<div id="cuadro">
    <div id="marco"></div>
    <div id="foto">
        <img src="images/imagen-inferior.png"  />
    </div>  
 </div>
 
 
</body>
</html>

Con esta solución, el borde redondeado interno del marco amarillo queda sobre la imagen.
Se podría eliminar el div "foto" y aplicar los estilos directamente a la imagen, pero creo que para mayor claridad es mejor de esta forma.

Saudos

alvaro0022 · #5 (**permalink**) 17/09/2011, 08:30

dleal100 y C2am muchisimas gracias por sus respuestas!!

C2am hiciste justo lo que queria, funciona perfecto mil gracias. Estaba volviendome loco esto jaja.

Saludos y nuevamente muchas gracias!!!!