blurring a web page background

Question

i have seen many websites like msn.com or sulekha.com(although sulekha.com is not in silverlight) which is said to be in silverlight. and its home page gives blurr effect. But when we right click on the page it does show html. so can any body help me on this? i don't want to do anything in ??javascript??

Answer 1

I think you are referring to the effect whereby the background is "dimmed" or "darkened" while presenting something in the foreground, like a picture or a dialog box. Clicking on the example images on the lightbox page should provide an example of what I mean.

This is done with plain JavaScript and a handy div. First you need a div with some CSS properties so that it can cover the entire page:

position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 50;

The last line puts it above everything else. You also need to make it dark but see-through, and initially invisible:

background-color: #000;
opacity: 0.75;
filter: alpha(opacity=75); /* IE */
display: none;

You can now use some JavaScript to make it visible:

document.getElementById("your_div_id").style.display = "";

Edit: I just saw that you don't want to do anything in JavaScript. I don't understand why you're willing to use Silverlight but not JavaScript, but what do I know?