Para el primer ejemplo puedes revisar esta parte del css:
#pageHeader {background: url(pageHeader2.jpg) 0 0 no-repeat;
height: 157px; width: auto; position: relative; z-index: 10;}
#pageHeader h1 {background: url(ph-flower.gif) 0 0 no-repeat;
height: 330px; width: 250px; position: absolute; z-index: 101;
top: -95px; right: -80px; margin: 0;}
html>body #pageHeader h1 {background-image: url(ph-flower2.png);}
juega un poco con el codigo para que veas en que forma varía.
yo estaba jugando así:
<html>
<head>
<STYLE TYPE="text/css">
#header {
width:250px;
height:330px;
background: url('ph-flower2.png') no-repeat;
position: absolute; z-index: 101;
top: -5px; right:80px; margin: 0;
}
</style>
</head>
<body>
<div id="header"></div>
</body>
</html>
Saludos.