Aplicar una imágen de fondo a la etiqueta IMG

DDrDark · #1 (**permalink**) 20/07/2008, 11:40

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

Mikmoro · #2 (**permalink**) 20/07/2008, 16:22

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>

DDrDark · #3 (**permalink**) 21/07/2008, 18:36

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

saludos!