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