Sophtware Sophtware - 1 year ago 77
CSS Question

Make an entire webpage be tinted

I want to know how I can take any given webpage and make everything look tinted a certain color. Basically, if you take google and tint it orange, it should look something like this:
Example of what correctly tinted webpage would look like

The way that I have been trying to accomplish this is by adding a div at the VERY END of a webpage's body tag. Basically, this is what I do:

stuff that goes in head...
all the content of the webpage...
<div style="position:fixed;height:100%;width:100%;
left:0px;top:0px;opacity: 0.5;">
<div style="height:100%;width:100%;position:static;

Unfortunately, what happens when you do this in Google looks like this:
Filter that does not cover the whole page

As you can see, the top bar of Google's webpage is not impacted by the tint in this second picture. This is just one example of my code not working, the chat conversations nor the header bar of facebook gets tinted by my code. I'm sure there are plenty of cases where my code does not completely tint the whole page. I am not sure if adding a div to webpages is the right way or maybe I should just try something with javascript. If it isn't clear, I want to be able to tint the webpage in the browser, NOT by screen capturing it and editing the image in a program as I have done with the first image.

In the end, what I need for my project is to be able to manipulate the visual output of a webpage in many strange ways (stretch the page, dim it, blur it, make it look fisheye, make it shake like the screen is shaking, etc.). Essentially, I want to learn how to have as much control over a webpage as possible. Even if you can't help me achieve this, if you can help me with the current issue of tinting the webpage in any way, I would appreciate it. :)

Answer Source

You need a couple more css styles:

position: fixed; /* keeps the screen covered durning scroll */
z-index: 100000; /* puts it on top of everything */
top: 0;
left: 0;
opacity: .3; /* so we can see through it */
pointer-events: none; /* so we can click through it */

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download