Foros del Web » Creando para Internet » CSS »

imagen sobre otra imagen con css?

Estas en el tema de imagen sobre otra imagen con css? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/06/2009, 10:51
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
imagen sobre otra imagen con css?

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???
  #2 (permalink)  
Antiguo 11/06/2009, 10:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

Mira a ver si esto te sirve de orientación:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>play sobre imagen</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. #contenedor{
  10. position: relative;
  11. }
  12. .sobre {
  13. position:absolute;
  14. top:128px; /*en función de los tamaños de tus imágenes */
  15. left:200px; /*en función de los tamaños de tus imágenes */
  16. opacity: .7;/*esto es una frivolidad*/
  17. }
  18. </head>
  19. <div id="contenedor">
  20. <img src="http://share.skype.com/sites/es/skype/skype32ready.jpg" />
  21. <img class="sobre" src="http://www.norwichcanoeclub.org.uk/images/Play-icon256-by-nagaya.png" width="100" height="100" />
  22. </div>
  23. </body>
  24. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 12/06/2009 a las 12:28 Razón: /*comentar el código*/
  #3 (permalink)  
Antiguo 12/06/2009, 10:16
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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??
  #4 (permalink)  
Antiguo 12/06/2009, 10:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

¿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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 12/06/2009, 10:24
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: imagen sobre otra imagen con css?

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
  #6 (permalink)  
Antiguo 12/06/2009, 10:27
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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>
  #7 (permalink)  
Antiguo 12/06/2009, 10:30
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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>

Última edición por oscarza; 12/06/2009 a las 10:50
  #8 (permalink)  
Antiguo 12/06/2009, 10:31
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: imagen sobre otra imagen con css?

ahora falta el html, para poder comprender a quien le aplicas los estilos :)
  #9 (permalink)  
Antiguo 12/06/2009, 10:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 12/06/2009 a las 10:44
  #10 (permalink)  
Antiguo 12/06/2009, 10:32
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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
  #11 (permalink)  
Antiguo 12/06/2009, 10:35
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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.
  #12 (permalink)  
Antiguo 12/06/2009, 10:41
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: imagen sobre otra imagen con css?

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.
  #13 (permalink)  
Antiguo 12/06/2009, 10:51
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

ya edite el html del post anterior, ya puse el #derecha2
  #14 (permalink)  
Antiguo 12/06/2009, 11:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 12/06/2009 a las 11:34
  #15 (permalink)  
Antiguo 12/06/2009, 11:06
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: imagen sobre otra imagen con css?

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.
  #16 (permalink)  
Antiguo 12/06/2009, 11:44
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

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)
  #17 (permalink)  
Antiguo 12/06/2009, 12:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

Mira a ver si este código pone tu avatar sobre el texto y una imagen:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>play sobre imagen</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;}
  6. #derecha{
  7. background: #900;
  8. position:relative;
  9. width:383px;
  10. height:246px;
  11. float:left;
  12. margin-right:5px;}
  13.  
  14. #derecha2 {
  15. background: url(http://profile.ak.facebook.com/v222/238/8/t1668407121_3819.jpg) repeat;
  16. width:383px;
  17. height:246px;
  18. position:absolute;
  19. top:0;
  20. left:0;
  21. opacity: .4;/*añadir filter alpha para ie*/
  22. }
  23. p {color: #fff;}
  24. </head>
  25. <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>
  26.                   <img src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png">
  27.                   <div id="derecha2">
  28.                   </div>
  29.                   </div>
  30. </body>
  31. </html>
Probado en FF, chrome, opera, ie7 (opacity no lo entiende)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 12/06/2009, 12:23
 
Fecha de Ingreso: junio-2009
Mensajes: 36
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

Definitivamente lo que buscaba, demaciadas gracias kseso?!!!
  #19 (permalink)  
Antiguo 12/06/2009, 12:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: imagen sobre otra imagen con css?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #20 (permalink)  
Antiguo 28/03/2012, 07:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 124
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: imagen sobre otra imagen con css?

Mil gracias. Me ha servido de gran ayuda.
Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:32.