How to place an img on top of another img - html

Question

I am trying to place one on top of another at my website finegra.in. Here is a screenshot of the site right now:
I just want the "visit our kickstarter project" img to go right here:
Here are the html and stylesheets:
<div id="page" class="hfeed">
<header id="branding" role="banner">
<!--
<nav id="access" role="navigation">
<h3 class="assistive-text">Main menu</h3>
<div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
<div class="menu"><ul><li class="current_page_item">Home</li></ul></div>
</nav><!~~ #access ~~>
-->
<hgroup>
<div>
<a href="http://www.finegra.in"><img id="logo" alt="fine grain Logo" src="http://www.finegra.in/wp-content/uploads/2012/04/fineGRAINlogoGOOD-WEB.png">
</a>
<img id="headerimg" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/headerimg2.jpg">
<a href="http://www.kickstarter.com/projects/finegrain/17408941?token=364cb635"><img id="branding" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/checkOurProject.png">
</a>
</div>
<div id="site-generator">
FineGrain LLC Copyright 2012. All Rights Reserved
</div>
</hgroup>
</header><!-- #branding -->
style.css:
#branding {
border-top: 0px solid #BBBBBB;
padding-bottom: 10px;
position: relative;
z-index: 9999;
background: none repeat scroll 0 0 #DADAD2;
}
#headerimg {
width: 30% !important;
width: 100% !important;
}
#branding img {
margin-bottom: 20px;
width: auto;
}
.one-column #page {
max-width: 1500px;
}
.one-column #content {
margin: 0;
width: auto;
}

Answer 1

Assuming you are using jQuery, you may create the watermarks for your images at the DOM ready function and make theirs position absolute and calculated relative to the images.
<script type="text/javascript">
// Watermark image, change the src with your image's url
var watermark = '<img src="watermark.png" border="0" style="border:none; background-color:transparent; position:absolute; ';
// Position relative to image inside:
var insideTop = 20;
var insideLeft = 50;
$(document).ready(function () {
$("img").each(function (ix, el) {
var top = $(this).offset().top + insideTop;
var left = $(this).offset().left + insideLeft;
var imgWatermark = watermark + 'top:' + top + 'px; left:' + left + 'px;"/>';
$("body").append(imgWatermark);
});
});
</script>
If you have images that will have the watermark and images that won't, add an attribute class="withWatermark" to the images that will have and replace the $("img") in the script with $(".withWatermark").
<img src="myimage.jpg" class="withWatermark" />
$(".withWatermark").each(function (ix, el) {

Answer 2

How about something like this? http://jsfiddle.net/UtKbC/
CSS:
.visit_project {
position: absolute;
top: 250px;
left: 400px;
}
HTML:
<a href="http://www.kickstarter.com/projects/finegrain/17408941?token=364cb635" class="visit_project"><img id="branding" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/checkOurProject.png">
</a>
It might be wiser to wrap the header image in it's own div and set the checkOurProject.png image to the absolute value based on that div wrapper.

Answer 3

I think you can do this easily by simple css with the help of float :-
CSS
#header {
background: url("http://i.imgur.com/1nrC6.jpg");
width:1040px;
height:402px;
}
.logo {
float:right;
margin-top:200px;
}
HTML
<div id="header">
<img class="logo" src="http://i.imgur.com/17oqa.png"border="0"/>
</div>
see the demo:- http://jsfiddle.net/UtKbC/6/