Overlay an image on your page
CSS-only method to overlay an image on an html page - all you need to do is edit
the background-image property! Very useful if you need to almost identially
copy a design from an image for some reason.
css
body {
position: relative;
}
body::after {
content: '';
/* EDIT THIS LINE TO POINT TO YOUR REFERENCE IMAGE */
background-image: url('./path/to/image.png');
position: absolute;
inset: 0;
background-repeat: no-repeat;
opacity: 0.5;
pointer-events: none;
z-index: 999998;
}Info
If you need your <body> to be a specific width and height, you can set it with
CSS in the top rule above.