Img overlay for website??

[EdgyRabbid]

I want to make a thing with my Gary Shrine, and use this screenshot as an over lay and have the shrine be under it. would it be a good idea to use absolute positioning? or is there another way i should use to do this?? This is my first time coding something like this, and i would like to know if theres a better way of doing it.

[Dan Q]

I did something a lot like this for my Beige Buttons (press the "reset" button!). Here's the relevant source code. But the skinny is:

Yes, use absolute positioning. Probably you want to position your image with something like:

Code

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;

You'll note I've used fixed, not absolute, positioning. The benefit is that the user can't "scroll past" it (it moves "with" them). The alternative, if you've got a page long enough to potentially scroll, is to set overflow: none; on the body. But position: fixed; is tidier IMHO.

If you want the entire image to be visible regardless of the screen resolution then you'll want object-fit: contain; (and be sure to set a background-color: so it can't be seen "around").