non scrolling png image as header

342 Views Asked by Zeebats At 06 April 2025 at 20:28

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>

Original Q&A

There are 2 best solutions below

Praveen Dabral On 31 March 2013 at 19:21 BEST ANSWER

See if this works for you.

<div class="header">Some data</div>


.header
{
position:fixed;
top:10px;
}

Travis J On 31 March 2013 at 19:21

Make your image transparent in the places you want to be see through. That will be done in graphics software. Then set your anchor up which holds the image with a way to be easily indexed, such as with an id.

<a id="transparentHeader" href="mypage" target="top"><img src="myimage.png"></a>

Then set the css up so that the anchor is "fixed" to the top of the page.

#transparentHeader{
 z-index:999;
 position:fixed;
 top: 0px;
 left:0px;/*not centered*/
 /* margin: 0 auto; centered */
}

non scrolling png image as header

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HEADER

Related Questions in PNG

Related Questions in NON-SCROLLING

Trending Questions

Popular # Hahtags

Popular Questions