Question

I’m trying to make a page without the opacity css stuff, but with a transparant image over all the text and images. Only, i can’t get the background over the text.

CSS:

   background-image: url('spotlight.png');
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;

And HTML simple:

<div class="darkLayer"></div>

Result:

Thanks!

Answer 1

If you want the png overlay over everything in the page, you need to have your overlay div empty of all content, and increase z-index to something like 20000 or whatever.

Although, I’m not 100% sure what you are trying to do.

But it does beat css in terms of cross-browser compatiblity, I think.

Yes, use quotation marks on your image url.