Foros del Web » Creando para Internet » CSS »

Aplicar una imágen de fondo a la etiqueta IMG

Estas en el tema de Aplicar una imágen de fondo a la etiqueta IMG en el foro de CSS en Foros del Web. Muy buenas!, aver os explico: estoy haciendo un portfolio online con algunos de mis trabajos. Básicamente es un tema de wordpress al que lo he ...
  #1 (permalink)  
Antiguo 20/07/2008, 12:40
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Exclamación Aplicar una imágen de fondo a la etiqueta IMG

Muy buenas!, aver os explico: estoy haciendo un portfolio online con algunos de mis trabajos. Básicamente es un tema de wordpress al que lo he ido modificando para mas o menos adaptarlo a mi gusto y necesidades.

Pues bien, cada trabajo es una entrada en wordpress. Como véis lo que me interesa destacar es una imagen, y a ésta quiero ponerle a su vez una imagen de fondo para darle un efecto de volumen. Por supuesto quiero aplicarla a todas las imágenes de todas las entradas.

He probado muuuuuuchas formas de hacerlo y la única que me ha funcionado (a duras penas ya que en algunos navegadores no se ve bien o nada) es hacer 2 divs con 2 clases: gallery y bg

Código:
.gallery {
	padding: 0px;
	margin: 0px;
	position: relative;
	width: 500px;
	height: 350px;
	z-index: -1;
}

.bg {
	right: 29px;
	padding: 0px;
	margin: 0px;
	bottom: 338px;
	position: relative;
	background: url(images/effect.png) no-repeat;
	width: 558px;
	height: 372px;
	z-index: -1;
}
Mi HTML dentro del post de wordpress quedaría así:

Código HTML:
<a href="http://www.midtonedesign.com/portfolio/wp-content/uploads/2008/07/safaridash.png">
<div class="gallery">
<img class="alignnone size-full wp-image-65" title="safaridash" src="http://www.midtonedesign.com/portfolio/wp-content/uploads/2008/07/safaridash.png" alt="" width="500" height="313" />
<div class="bg"></div></div></a> 
He intentado usar la etiqueta IMG con una clase para no tener que añadir los 2 divs manualmente, pero me es imposible visualizarla o acomodarla para que quede centrada con la otra imagen.

La imagen que quiero poner de fondo es esta

Cualquier ayudita será muy útil! un saludo y gracias. Espero que se me haya entendido, lo que más me interesaría es hacerlo de alguna forma automática para no tener que editar el html, simplemente añadir la imagen con wordpres y que ya me ponga la otra de fondo
  #2 (permalink)  
Antiguo 20/07/2008, 17:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Aplicar una imágen de fondo a la etiqueta IMG

A ver si te sirve esto de referencia:

Cita:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
.gallery {
padding: 0px;
margin: 0px;
position: relative;
width: 558px;
height: 372px;
background: url(images/effect.png) no-repeat;
}
img {border: none;position: absolute;top: 18px; left: 27px;}
</style>
</head>
<body>
<a href="http://www.midtonedesign.com/portfolio/wp-content/uploads/2008/07/safaridash.png">
<div class="gallery">
<img class="alignnone size-full wp-image-65" title="safaridash" src="http://www.midtonedesign.com/portfolio/wp-content/uploads/2008/07/safaridash.png" alt="" width="504" height="316" />
</div>
</a>
</body>
</html>
  #3 (permalink)  
Antiguo 21/07/2008, 19:36
 
Fecha de Ingreso: octubre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Aplicar una imágen de fondo a la etiqueta IMG

Muchísimas gracias, me ha sido de gran utilidad. Lo he probado, modificado y he conseguido exactamente lo que necesitaba!

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:28.