Add a pixel-perfect overlay to your design

Thanks for your interest but we are no longer taking projects.

Like Us On Facebook:  

It can be hard trying to match up a client’s mockup to your web design. Margins, padding, etc can be tricky and time consuming, having to refresh the page constantly.

Use this code to overlay a file, complete with on/off switch!

First, add this to your stylesheet.


background-image: url(/**your image link goes here**/);
position: absolute;
top: 0px;
left: 0px;

z-index: 999;
.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;

*Note: be sure to change the background-image to your mockup

Next, add the following block of code right after the opening body tag.

<div class=”designOverlay”>
<a class=”overlay-off” href=”#no-overlay”></a>
<img id=”no-overlay” src=”put your img here” alt=”” />
<a class=”overlay-on” href=”#”></a>


Be sure to change the img src to your mockup image as well.

This will overlay the image, and add a red “off” switch and green “on” switch in the top-left of your site.

Have your say!

Have your say!


Name *

Email *

Thanks for your interest but we are no longer taking projects.

Recent Posts