3

I need a semi-transparent image layered over everything in my webpage, but so that users can click through to the form inputs and text fields underneath. The user will not interact with the top image layer.

I'm thinking I can create the image and adjust the opacity in photoshop. Then put the png in a div with the appropriate z-index. But then user clicks still go to that top div, not to the layers underneath.

Is there something more I can do from here, or another method to accomplish the desired effect?

I'm just working with html, css, js. No server side stuff. Thanks!

2 Answers2

2

For a click through image/div, check this answer:

Click through a DIV to underlying elements

.

Quoting code:

CSS

 pointer-events:none;
 background:url('your_transparent.png');

IE conditional

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',

sizingMethod='scale'); background:none !important;

Here is a basic example page with all the code.

http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html

Update:

You can combine it with this technique http://jsfiddle.net/jpCfz/6/ from Make overlay background click-through-able for IE (the question ays it works in IE but not in Firefox), or you may need a bit of JavaScript that is described in Click through a DIV to underlying elements other answer than quoted above.

Update 2:

I didn't want to open this because maybe you have good reasons to do it this way, but obviously, as mentioned in the other answer, you may consider using a background image and opacity instead (so the picture is below the content not on top of it) and then you don't need to worry about clicking. If this is possible in your case, go for it.

Community
  • 1
  • 1
Meligy
  • 32,897
  • 11
  • 79
  • 103
1

You might want to think about this in the opposite way: form elements on top, image behind.

Encapsulate the form elements in a container with a white background and adjust opacity on this container element. Let your image sit behind the content and use absolute positioning to isolate it from the rest of the DOM layout. 

<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
  <!-- form elements, etc -->
</div>

Should get you close to the effect you want without having to fight the browser's default event handling.

Amit
  • 728
  • 5
  • 8