So I have a site, picture this: The site is designed a background image that looks like the stage of a theater. Content goes where the backdrop would be. I have a few pages that will be displaying video in the center and I would like to do an effect of fading the lighting to the background when navigating to this page and then fade up when navigating away.

So it goes:
regular page -> click link to a video site -> everything but stage bg and title with links goes away (blank backdrop) -> fade everything -> show video then wait for replay or click to navigate back elsewhere -> fade back up -> go to desired page

I'm thinking there might be a css way with javascript perhaps

Well if you want a real fade, you'll need to hook the javascript to a timer, and do some tricky stuff to be able to set opacity. Flash might be a better choice. Or, I don't know if this is possible, but you could look into animated gifs.

But you can grab an html element with javascript ( document.getElementById('x') ) and then change its class or background image.