CODEWITHSUNDEEP
htmlcss
thinkofacard
thinkofacard

Reputation: 501

how to create a dark semi-transparent cover over entire page?

Is there a way to create a 50% opaque black div over the top of the entire webpage?

I can do it by putting a fixed position div at the top of the script with 100% width and height and a z-index of 1. But, by making it fixed I can't put a div in front (that isn't dark) which can scroll.

I tried doing the following in CSS:

#dark_cover{

    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000;
    position: relative;

    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

But, most of the page is not darkened (even if I make the z-index:100) and it still only is the size of the original viewport, and when you scroll down you can see that it does not extend to the bottom of the page (despite the div starting at the very top of the page and not being closed until the very very bottom, so everything in the page should be wrapped inside it).

Is there a way to do this?

UPDATE:

The dark_cover div should be on TOP of everything else on the page. Imagine you take a page that already exists and on top of that page there is a semi-transparent dark div, like a tinted glass that you place over the entire page. And then you have an extra div with some minor content on top of that glass.

When I put the z-index as 10 it should be on top of everything else on the page, correct? (assuming nothing else has a z index) But that's not the case. It's only on top of a couple of background divs and not the rest.

And I tried doing position:absolute making the left, top, right, bottom all 0. But, it sill only spans the original view port and not when scrolling.

Upvotes: 0

Views: 2772

Answers (3)

rybo111
rybo111

Reputation: 12598

Bootstrap modals now scroll as the main content, which is perfect.

You have said their modal design is exactly what you want. Have you thought about using Bootstrap? Try looking at their customise option if you only want certain features.

However, I don't recommend customising. If you include their hosted CSS and JS (not customised), the page will load quicker, as it's pulling those resources from elsewhere, and your users are likely to have those files cached already.

Upvotes: 0

James Waddington
James Waddington

Reputation: 2905

Fixed position should do the job, then use absolute or relative for your overlay with an appropriate z-index.

.overlay {
    background-color: #ffffff;
    position: absolute;
    z-index: 15;
}

Here's a fiddle based on what you have:

body {
  margin: 0;
}
.overlay {
  background-color: #ffffff;
  position: absolute;
  padding: 10px;
  z-index: 15;
  width: 60%;
  left: 20%;
  top: 40px;
  /*Height is for example to make overlay scroll*/
  height: 200vh;
}
#dark_cover {
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #000;
  position: fixed;
  /* RGBa with 0.6 opacity */
  background: rgba(0, 0, 0, 0.5);
  /* For IE 5.5 - 7*/
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
<div id="dark_cover"></div>
<div class="overlay">
  <p>This is the overlay</p>
</div>
This is content

Upvotes: 1

NiklasMH
NiklasMH

Reputation: 767

The problem has already been solved, but I want to provide with another technique - just for more information:

You can use:

z-index: -1;

Now you just need to order every element which needs to be on top - to be over, and each element behind - at the bottom. It is just like the others, but with fixed position.

This seems to work on some of the most common browsers (IE, Chrome, Mozilla):

#dark_cover{
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;

  /* RGBa with 0.5 alpha*/
  background: rgba(0, 0, 0, .5);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Upvotes: 0

Related Questions