Menu
So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far:
<html> <head> <style type="text/css"> .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;} body { height: 100%; } html { height: 100%; } </style> </head> <body> <div style="height: 100%; width: 100%; position: relative;"> <div style="height: 100px; width: 300px; background-color: Red;"> </div> <div style="height: 230px; width: 9000px; background-color: Green;"> </div> <div style="height: 900px; width: 200px; background-color: Blue;"></div> <div class="OverLay">TestTest!</div> </div> </body> </html> I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.
330
Make the browser window fullscreen On a Windows computer, you can set Google Chrome, Internet Explorer, Microsoft Edge, or Mozilla Firefox to full-screen mode, hiding the toolbars and address bar by pressing the F11 key. To reverse this action and show these items again, press F11 again.
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
Add position:fixed . Then the cover is fixed over the whole screen, also when you scroll. And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.
The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.
Example: http://jsbin.com/okabo3/edit
div.fadeMe { opacity: 0.5; background: #000; width: 100%; height: 100%; z-index: 10; top: 0; left: 0; position: fixed; } <body> <div class="fadeMe"></div> <p>A bunch of content here...</p> </body> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
