How to change transparency of background image using javascript?

Problem

I have an repeating opaque background for an element. I need to be able to change the opacity for the background image using javascript. I want to adjust the image opacity based on scroll position.

I found this link to do it using css "after" pseudo class: Css-tricks

But it looks like I cannot change properties for pseudo classes using javascript. Does anyone know how I can achieve this?

Problem courtesy of: nspmangalore

Solution

Try something like this:
HTML:

<div id="img"></div>

CSS:

#img{background:url(enter your image file url here); width:100%; height:100%;}

JavaScript:

document.getElementById("img").style.opacity=0.5;
Solution courtesy of: orb

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.