Home/ Questions/Q 806859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:18:41+00:00

So I have a problem that I think is quite common but I have

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0