Fixed header image

Community Off Topic
1

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!

2

What happens if you add, display: block;?

And, change Fixed to fixed

4

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 http://www.popexpo.co/popexpohome.html

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

6

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

7

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.

8

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

9

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.

10

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