imagen sobre otra imagen con css?

oscarza · #1 (**permalink**) 11/06/2009, 09:51

Hola amigos, estoy haciendo una web, el problema que tengo es que quiero poner una imagen png con un degradado sobre una foto, pero el png del degradado siempre me sale debajo de la foto(deberia ser encima), no se que hacer, lo hice con un appdiv y z-index 1, pero siempre sigue saliendo debajo de la foto, alguien que me ayude???

kseso? · #2 (**permalink**) 11/06/2009, 09:59

Mira a ver si esto te sirve de orientación:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0;}
html, body {
background-color: #cdcdcd;
}
#contenedor{
position: relative;
}
.sobre {
position:absolute;
top:128px; /*en función de los tamaños de tus imágenes */
left:200px; /*en función de los tamaños de tus imágenes */
opacity: .7;/*esto es una frivolidad*/
}
</style>
</head>
<body>
<div id="contenedor">
<img src="http://share.skype.com/sites/es/skype/skype32ready.jpg" />
<img class="sobre" src="http://www.norwichcanoeclub.org.uk/images/Play-icon256-by-nagaya.png" width="100" height="100" />
</div>
</body>
</html>

oscarza · #3 (**permalink**) 12/06/2009, 09:16

Disculpa por repetir la pregunta!
Lo que pasa es que no quiero usar posicion absoluta para colocar el div sobre el otro, porque no me repeta el margen superior y el inferior del contenedor principal,
extrañamente si respeta los margenes derecha e izquierda, qu puedo hacer??

kseso? · #4 (**permalink**) 12/06/2009, 09:22

¿Y por qué no pones tú código, o mejor, un enlace a lo que tienes hecho?

Y respetar los 4 márgenes no acabo de comprender, supongo que será una cuestión del tamaño de la imagen, se posicionará donde le marques con top/left y ocupará hacia abajo y la derecha en función de su tamaño.

gioramies · #5 (**permalink**) 12/06/2009, 09:24

Hola:

Deberías editar la imagen y crear una sola donde estén las dos, una sobre la otra, de tal forma que tengas una sola imagen y la coloques donde quieras.

Sería mucho mejor si colocas el código que tienes para analizar el problema de los márgenes. Saludos

oscarza · #6 (**permalink**) 12/06/2009, 09:27

Código:

<style type="text/css">
<!--

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	width:800px;
	margin:auto;
	height:500px;
	/margin-top:150px;


}

#contenedor {
	/*left:185px;*/
	/*top:44px;*/
	width:800px;
	height:500px;
	margin:auto;
	margin-top:150px;
	background-image:url(azul.png);
	

}
#logo {
	position:relative;
	margin-top:9px;
	width:65px;
	height:67px;
	float:right;
	margin-left:5px;
	margin-right:5px;
	background-image:url(logo.png);

}
#menu1 {
	position:relative;
	margin-left:100px;
	margin-top:33px;
	width:260px;
	height:25px;
	float:left;
}

#menu1 a{
	float:left;
}
#menu2 {
	position:relative;
	margin-right:105px;
	margin-top:33px;
	width:260px;
	height:25px;
	float:right;
}

#menu2 a{
	float:right;
}
#header{
	width:800px;
	height:77px;
	background-image:url(header.png);
	background-repeat:no-repeat;
	}
	
	#main{
		width:800px;
		height:246px;
		margin-top:5px;
		
	
		}
		
		#boton1{
			margin-left:100px;
			height:121px;
			width:105px;
			margin-right:5px;
			background-image:url(botongr.png);
			margin-bottom:3px;
			}
			#boton2{
			margin-left:100px;
			height:121px;
			width:105px;
			margin-right:5px;
			background-image:url(botongr.png);
			margin-bottom:3px;
			margin-top:3px;
			}
			#izquierda{
				position:relative;
				width:210px;
				height:246px;}
				
				
				
				#boton3{
			
			height:121px;
			width:105px;
			
			background-image:url(botongr.png);
			margin-bottom:3px;
			}
			#boton4{
			
			height:121px;
			width:105px;
			
			background-image:url(botongr.png);
			margin-bottom:3px;
			margin-top:3px;
			}
			#derecha{
				position:relative;
				width:383px;
				height:246px;
				float:left;
				margin-right:5px;}
				
				#derecha2{
				position:relative;
				width:383px;
				height:246px;
				float:left;
				margin-right:5px;
				z-index:20;
				
				}
#centro {
	position: relative;
	height: 246px;
	width: 105px;
	
}

#izquierda, #centro, #derecha { float:left;}

#grad {
	position:absolute;
	left:508px;
	top:232px;
	width:252px;
	height:247px;
	z-index:8;
	padding-left:135px;
	
}

#featured{
	position:absolute;
	width:290px;
	height:246px;
	float:left;
	z-index:13;
	margin-left:300px;
	margin-right:210px;
	margin-top:80px;
	margin-bottom:0px;
	background-image:url(featu.png);
	/margin-top:82px;
	clear:both;
}

ul li{
	list-style:none;
	display:inline;
	margin-left:0px;}
	
	#footer{
		position:relative;
		margin-top:10px;
		width:500px;
		height:40px;}

-->
</style>

oscarza · #7 (**permalink**) 12/06/2009, 09:30

Código:

body>


<div id="featured"></div>
<div id="contenedor">
<div id="header">
			<div id="menu2">
            
            	<ul>
                	<a href=""><li><img src="contacto.png" /></li></a>
                    <a href=""><li><img src="kttv.png"></li></a>
                    <a href=""><li><img src="musica.png"></li></a>
                    <a href=""><li><img src="academia.png"></li></a>
                
                </ul>
            
            </div>
			<div id="logo"></div>
			<div id="menu1">
            	<ul>
                	<a href=""><li><img src="c4.png" /></li></a>
                    <a href=""><li><img src="ministerios.png"></li></a>
                    <a href=""><li><img src="conferencias.png"></li></a>
                    <a href=""><li><img src="cumbres.png"></li></a>
                
                </ul>
            </div>
	</div>
    
    			<div id="main">
                <div id="izquierda">
    			  	<div id="boton1"></div>
                  	<div id="boton2"></div>
                  </div>
                 <div id="derecha2"> </div>
                <div id="derecha">
                  <img src="images/featuredimages/featuredImage.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage2.png" alt="rotador"/>
    			  <img src="images/featuredimages/featuredImage3.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage4.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage5.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage6.png" alt="rotador"/>
                  
                  </div>
                  
                 
    				
                    
                    	
                    
    			<div id="centro">
                <div id="boton3"></div>
                  	<div id="boton3"></div>
                    </div>
    			</div>
                <div id="footer"></div>
</div>
</body>

gioramies · #8 (**permalink**) 12/06/2009, 09:31

ahora falta el html, para poder comprender a quien le aplicas los estilos :)

kseso? · #9 (**permalink**) 12/06/2009, 09:32

Vale Oscarza, pero ¿y la parte del html que implica las cajas que quieres colocar una encima de otra? Tampoco es necesario que publiques todo el html.
Y como te decía, si lo tienes en red y pones un enlace (sin las 3w ni el http ://) mejor

EDITO, por impaciente (yo):
OK, ya lo veo

oscarza · #10 (**permalink**) 12/06/2009, 09:32

El div que quiero superponer es el que se llama #derecha2, quiero que #derecha2 este sobre #derecha, pero #derecha2 me enpuja el contenido de #derecha hacia abajo

oscarza · #11 (**permalink**) 12/06/2009, 09:35

Lo de hacer las 2 imagenes en una sola no me sirve porque en la capa de abajo tengo un rotador de imagenes en jquery, encima de ella quiero poner la otra dvi con una imagen estatica en png.

gioramies · #12 (**permalink**) 12/06/2009, 09:41

Vale, el código en html esta correcto, pero no veo #derecha2, colócalo también.
Comprendo lo que quieres hacer y ciertamente tienes que usar position: relative o absolute, dependiendo de tu caso.

oscarza · #13 (**permalink**) 12/06/2009, 09:51

ya edite el html del post anterior, ya puse el #derecha2

kseso? · #14 (**permalink**) 12/06/2009, 10:01

Tienes derecha2 fuera de derecha, cuando tiene que estar dentro. Y priemero coloca el contenido de #derecha en el html y después el de #derecha2.
Compara las propiedades de derecha2 tuyo con las que yo te puse al inicio
Las tuyas:

Cita:

#derecha{
position:relative;
width:383px;
height:246px;
float:left;
margin-right:5px;}

#derecha2{
~~position:relative;~~
width:383px;
height:246px;
float:left;
margin-right:5px;
z-index:20;

}

Las propuestas:

Cita:

#derecha2 {
position:absolute;
top:0; ~~/*en función de los tamaños de "derecha" */~~
left:0; ~~/*en función de los tamaños de "derecha" */~~
opacity: .7;/*esto es una frivolidad*/
}

No necesitas definir margen derecho, pues con el top/left ya lo colocas en su lugar, y claro que te sobresaldrá #derecha2 de #derecha, pues son del mismo tamaño y encima le añades un margen.

gioramies · #15 (**permalink**) 12/06/2009, 10:06

Listo. Prueba colocándole un top y un left a #derecha2. Esto es la distancia (px, em,...) de dicha capa con respecto al lado izquierdo y superior de su elemento contenedor. Debería funcionarte de esta forma.

Si lo deseas, puedes subir el .html y .css a internet o enviarmelo a mi correo de gmail con el mismo nombre de usuario que tengo aqui, y podré ayudarte de una forma más rápida.

Saludos, por lo pronto estaré ausente, tengo que salir XD. En cuanto pueda, si aún tienes el problema estaré presto a ayudarte.

oscarza · #16 (**permalink**) 12/06/2009, 10:44

css

Código:

#derecha2 {
	position:absolute;
	top:0px; /*en función de los tamaños de "derecha" */
	left:0px; /*en función de los tamaños de "derecha" */
	opacity: .7;/*esto es una frivolidad*/
	background-image:url(featu.png);
	background-repeat:no-repeat;
	width:383px;
	height:246px;
	z-index:31;
}

html

Código:

<div id="derecha">
                  <img src="images/featuredimages/featuredImage.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage2.png" alt="rotador"/>
    			  <img src="images/featuredimages/featuredImage3.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage4.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage5.png" alt="rotador"/>
                  <img src="images/featuredimages/featuredImage6.png" alt="rotador"/>
                  <div id="derecha2">
                  </div>
                  </div>

Esto fue lo que hice, en el dreamweaver ya se muestra el div(derecha2)bien colocado, pero en el navegador no muestra la imagen de fondo que le puse (featu.png)

kseso? · #17 (**permalink**) 12/06/2009, 11:13

Mira a ver si este código pone tu avatar sobre el texto y una imagen:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0;}
#derecha{
background: #900;
position:relative;
width:383px;
height:246px;
float:left;
margin-right:5px;}
 
#derecha2 {
background: url(http://profile.ak.facebook.com/v222/238/8/t1668407121_3819.jpg) repeat;
width:383px;
height:246px;
position:absolute;
top:0; 
left:0;
opacity: .4;/*añadir filter alpha para ie*/
}
p {color: #fff;}
</style>
</head>
<body>
<div id="derecha"><p>como no tengo las imágenes que tu pones, pongo algo de a a a a texto para que veas el efecto</p>
                  <img src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png">
                  <div id="derecha2">
                  </div>
                  </div>
</body>
</html>

Probado en FF, chrome, opera, ie7 (opacity no lo entiende)

Un saludo

oscarza · #18 (**permalink**) 12/06/2009, 11:23

Definitivamente lo que buscaba, demaciadas gracias kseso?!!!

kseso? · #19 (**permalink**) 12/06/2009, 11:30

Pues me alegro Oscarza.
Ya empezaba a preocuparme, porque si te fijas, el último código es básicamente el primero (las únicas variaciones han sido ajustar los tamaños y la posición).

Hasta la próxima

vencecanguelos · #20 (**permalink**) 28/03/2012, 06:53

Mil gracias. Me ha servido de gran ayuda.
Saludos