Una manera sería darle una altura a la capa transparente y sacar el div con la ul de ahí, colocándola después con posición relativa, pero no sé si le puedes dar ese tamaño de alto a tu capa:
Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>black-river</title>
<style type="text/css">
body {
background-image: url(
http://images.inmagine.com/48nwm/ima...22980020.jpg);
background-repeat: repeat;
}
#divPrincipal {
background-image: url(
http://img185.imageshack.us/img185/5847/azulry7.png);
background-repeat: repeat;
height: 200px;
}
* html #divPrincipal {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='http://img185.imageshack.us/img185/5847/azulry7.png', sizingMethod='scale');
height: 200px;
}
#cuerpo {position: relative; top:-150px;}
</style>
</head>
<body>
<div id="divPrincipal">
<h1>Título principal</h1>
</div>
<div id="cuerpo">
<p>El título de la lista</p>
<ul id="listaDrafts">
<li><a href="imagenes/bandera.jpg">foo</a></li>
<li><a href="imagenes/desarrollo-verde.jpg">bar</a></li>
<li><a href="imagenes/biblioteca.jpg">foobar</a></li>
<li><a href="imagenes/implicados.jpg">barfoo</a></li>
</ul>
</div>
</body>
</html>
Por cierto: qué bueno que hayas puesto la dirección absoluta de las imágenes para poder probar cosas con ellas.
Mikel.