I'll terrible with images so for this quick tutorial, I just create a simple GIF (with it's limitations). Here is a quick HTML document, and I'll attach the image that I used (you will of course, use a superior image)..
The important parts are the "<div style="position:RELATIVE; etc..." and the "<img src="position:ABSOLUTE; etc etc>" and in this example, the CSS "#content img {opacity etc etc}" of which, you'd not need if you use a *png.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */
p {font-size: 90%; line-height:1.2em; margin-top:10px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
#content img {opacity: .8;
-moz-opacity: .8;
-khtml-opacity: .8;
filter:alpha(opacity=80) ;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>
<!-- next: the 'Container DIV' -->
<div id="content" style="position:relative; width:600px; height:320px; padding:15px 20px; border:4px double #252525; margin:125px auto;">
<h1>A regular DIV container</h1>
<h3>This DIV is "position:relative;" and contains your text content.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>The image "your_free_move.gif" (terrible that is it, -I don't do image well), is "position:absolute;" and can be 'positioned outside' of the parent DIV (the REALATIVE div) by using "top:-60px" which moves it "sixty pixels up" from the 'top' of the parent.</p>
<p><span style="font-size:1.3em;"><strong>position:absolute; left:260px; top:-60px;</strong> width:365px; height:73px; <u>border:0 none;</u></span>
<br /><br /> is the CSS that does the trick. You need to state "border:0" or "border:0 none;" to prevent a default border from appearing.
</p>
<p><strong>Try changing the "-60px;" to "-50px;" or "-70px;" and see what happens...</strong></p>
<img src="your_free_move.gif" style="position:absolute; left:260px; top:-60px; width:365px; height:73px; border:0 none;" />
</div><!-- end of the 'container DIV' -->
</body>
</html>