I have searched on the web for like 6 hours and couldn't find what I need, so I think it's time to ask it to the pro's. I have a png image with some transparant points in it. I wan't this image as the header of my page and when someone scrolls the page the image stays on the top while the page scrolls behind the image. I have found some examples for non scrolling header divs, but in my case I want to see the page scrolling trough the transprant points in the image. Is this even possible? So yes can someone show me how or guide me to an tutorial or example?
Some simple html to make my question more clear:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<a href="mypage" target="top"><img src="myimage.png"></a>
<div id="content">
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<div>
</body>
</html>
See if this works for you.
<div class="header">Some data</div>
.header
{
position:fixed;
top:10px;
}