Fixed header image


Hello, I am trying to create a header image that is fixed to the top of the page. here is my code so far and I'm not sure why its not working.

  <img src="image.png" alt="Image" style="width:100px;height:100px;z-index: 100;position: Fixed;">

It's acting like a normal image that is static.
any help would be awesome!


What happens if you add, display: block;?

And, change Fixed to fixed


i just tried that and it didn't change anything. I'm a beginner so I'm not sure if it would help, but the link to the project I'm working on is

Im on safari and it works for a quick second then it just sticks to the top like how a position: absolute; would work.


i see the problem, now let me find a fix. i put your code in a bin, you can find it here, i also did a bit of a clean up, given that there was some repetitive code


thanks for your help, but is the logo staying fixed on the screen for you? Its not for me, its staying at the top when scrolling.


no, it is not. I will look into it, it is a complex problem, i will let you know when i find something


Okay, thank you. Ive been looking all over the internet for a solution! I feel like it shouldn't be hard to figure out because so many websites have the same general concept.


what does this do:

body {
      transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform-style: preserve-3d;
      background-color: transparent;

anyway, if i remove it, your fixed image work, maybe you should wrap it in a div? like i did here