Du machst einfach mittels div ein Blockelement. Dieses Element bekommt dann als Hintergrund das Hintergrundbild und definierst du zwei Div-Blockelement in dem bestehenden Element und positionierst du diese.
Hier ein sehr minimalistisches Beispiel:
Code (html): 
 
<!DOCTYPE HTML>
 <html>
	<head>
		<title>Test</title>
		<style type="text/css">
html {
	width:100%;
	height:100%;
}
 
body {
	width:1025px;
	height:100%;
	margin:0px auto;
}
 
#container {
	width:100%;
	height:850px;
	background-color:grey;
}
 
#container #username {
	position:relative;
	width: 300px;
	left:100px;
	top:50px;
	border:1px solid black;
}
 
#container #title {
	position:relative;
	width:300px;
	left:500px;
	top:500px;
	border:1px solid black;
}
      </style>
	</head>
	<body>
		<div id="container">
			<div id="username">Irgendein Nutzer</div>
			<div id="title">Projekt des<br/>Monats</div>
		</div>
	</body>
 </html>