¿Cómo colocar una imagen en una imagen?

suppose i have one div and div has img tag like <div><img src='img1.png'/></div> so when page will run then img1.png will load inside in div. i just need to know how could i place a another small image at the center on the like any busy image on img1.png. what would be the best way to do it like using jquery or css. give me css or jquery for placing small image on div at center.

i have another question that if a div has background image set with css then can i determine that background images download complete or not using jquery ? if possible then please show me a sample code. thanks

preguntado el 02 de febrero de 12 a las 11:02

Have you got any code we can look at? -

Check CSS z-index property for stacking elements one on top of another. -

What have you tried already? This isn't somewhere you come to get other people to write code for you... Have you even Googled your questions? -

4 Respuestas

Use wrap to add another div on top of the image...

$("#divID img").each(function() {
    var $overlay = $('<div></div>');
    $overlay.css({
        position: "relative",
        display: "inline-block",
        width: $(this).width(),
        height: $(this).height(),
        backgroundPosition: "center center",
        backgroundImage: "url(loading-image.gif)"
    });
    $(this).wrap($overlay);
});

Respondido 02 Feb 12, 16:02

how to place another div not only on top of image rather i need to place the div at center of image...how it will be possible? - Thomas

Set the width and height of the overlay image to the width and height of the image and then use background position to center the background image on the div. The only problem is that this needs the width and height of the image to work. - Reincorporar a Monica Cellio

Keep the first image as the background for the div:

<div style="background: url('img1.png')">
 <img src="img2.png" style="margin 0 auto" />
</div>

This will center the second image (only horizontally but). You might have to fiddle a little with margin y top attribute (if you use absolute or relative positioning). But if it is only one image in another image, you can just fiddle a little with margin-top and it should do it.

Respondido 02 Feb 12, 15:02

$("#imageToPlaceDivID").position({
  my: "center center",
  at: "center center",
  of: "#IDOfTargetElementWhereYouWantToPlace"
});

To place image must be a descendent element of Target Element... Try it and reply.

Respondido el 17 de diciembre de 12 a las 16:12

CSS3 supports multiple background layers. http://www.css3.info/preview/multiple-backgrounds/

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

respondido 14 mar '14, 18:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.