CODEWITHSUNDEEP
jquerycss
Thomas
Thomas

Reputation: 34188

how to place image on image?

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

Upvotes: 4

Views: 6267

Answers (4)

Frank
Frank

Reputation: 12300

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

Upvotes: 0

Bilal Shafi
Bilal Shafi

Reputation: 166

$("#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.

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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

Upvotes: 2

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

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 and the 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.

Upvotes: 0

Related Questions