CSS -- transparent "glass" modal, everything else darkened

THE ANSWER: background-attachment

---

----- JSBin Example ----

---

The answer is to use background-attachment

---

ORIGINAL QUESTION

I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked.

I have successfully used border: 10000px rgba(0,0,0,0.3) with border-radius: 10010px but this is a hack, and I can't outline the modal with a box-shadow

Is there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image.

---- JSBin Example ----

---

The answer is to use background-attachment

background-attachment: fixed;
background-size: cover;
background-position: center center;
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(http://imgur.com/oVaQJ8F.png);

---

.modal-backdrop {
    background: url(myurl.png) center center / cover no-repeat fixed
}

.modal-panel {
    background: url(myurl.png) center center / cover no-repeat fixed
}

The best value would be fixed (not all devices support fixed) so that your backdrop and your modal can share the same viewport X and Y (0, 0) by default

You then scale with background-size percentages or cover

When using background: shorthand, make sure to use a / to separate background-position from background-scale amounts

---

I ran into a bug on an older device, so I used local then manually computed leftX and topY to line up backdrop and modal-panel background-position at (0, 0) on my viewport.

I then scaled both images with the same percentage, to cover the screen

I also used a gradient, credit -- How to darken a background Image