How to place an image on an image?

Question

Suppose I have one div and the div has an img tag, for example, <div><img src='img1.png'/></div> so when the page starts, img1.png will load inside the div. I just need to know how I could place another small image in the center, like any uploaded image on img1.png. what would be the best way to do this, as using jquery or css. give me css or jquery to place a small image on a div in the center.

I have another question, if a div has a background image defined using css, then can I tell if the background image loading is complete or not using jquery? if possible please show me an example code. thanks

Answer 1

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); }); 

Answer 2

Save the first image as a background for the div:

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

This centers the second image (only horizontally, but). You may have to play around a bit with margin and top attributes (if you use absolute or relative positioning). But if this is only one image in another image, you can just play a little with margin-top, and he should do it.

Answer 3

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

Place the image must be a descendant of the Target Element ... Try and answer.

Answer 4

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; }