After feeling let down by both of these solutions, I decided to build my own little tool using nothing but HTML & CSS, and here it is:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .designOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 101%; text-align: center; }.designOverlay a { position: fixed; z-index: 6000; width: 40px; height: 40px; }.designOverlay img { position: relative; z-index: 5000; opacity: 0.3; }.overlay-off { left: 55px; top: 15px; background: rgba(113,19,19,0.5); }.overlay-on { left: 15px; top: 15px; background: rgba(19,112,20,0.5); }#no-overlay:target { display: none; } |
1
2
3
4
5
| <div class="designOverlay"> <a class="overlay-off" href="#no-overlay"></a> <img id="no-overlay" src="image.png" alt="" /> <a class="overlay-on" href="#"></a></div> |
This small amount of code allows you to insert your design onto the page on top of your HTML. It will be positioned in the centre of your browser automatically, no matter how wide it is, and will be at 30% opacity, which is my preffered level of opacity for this. Feel free to change any of this yourself. The great thing about this method is that you can customise it to get it exactly how you want it. It’s also incredible quick and easy to use, and the image will persist no matter how many times you refresh your browser. Simply add it to your pages and go. I add it to the header file that is then included on every page type to make it super easy to add and then remove later when it’s no longer needed.
The code will also place two buttons in the top-left corner of the browser that will allow you to switch the design on and off, using the :target CSS selector. This allows you to toggle the image on and off, and works by adding a tag to the address bar and then doing 2 different actions depending on whether the tag is there or not. In this case, it’s either showing the image or not showing it.
The container around the image is set to 101% of your browser’s height, to ensure that the scroll bar is visible when the image is turned off. This avoids the potential issue of your HTML jumping left and right based on whether the bar is there or not.
