Image backgroundColor does not apply

[Richard Ryu]

Hi, I'm wondering why my image does not change background color with "rgba"?

 

-- html --

<img src="/a.jpg" class="subpageBack">

 

-- script --

TweenLite.to(".subpageBack", 1, {backgroundColor:"rgba(0,0,0,0.65)", ease:Cubic.easeOut});

 

I'm just changing background color when the button has clicked.

See the Pen VayGJB by RichardSouth (@RichardSouth) on CodePen

[OSUblake]

What are you expecting to happen?

 

Something like this?

See the Pen 20d1ed4c388deed4c26c3b19cbe2ecbf?editors=001 by osublake (@osublake) on CodePen

[ohem]

Since you just want it to darken, you could do that by putting a black div above the image and tweening the opacity (autoAlpha)... like this: 

See the Pen ONzaQj by ohem (@ohem) on CodePen

 

 

Edit: or to avoid an extra "overlay" div, you could also use pseudo elements and the CSS Rule plugin like this: 

See the Pen NNXeKL by ohem (@ohem) on CodePen

 

Edit2: Just realized I was over complicating things with that first edit; you can skip the pseudo element & just put the image in a div with a black background, and then animate the opacity of the image itself, like this: 

See the Pen WwdmNO by ohem (@ohem) on CodePen

[Jonathan]

You really cant change the background-color of an <img> tag, unless that image is using a transparent png or gif ! Otherwise you wont see the color change since the image from the src would be covering up the background-color

 

Unless you meant change the tint of the <img> tag with a CSS Filter like Blake's example above? 

[jimeast]

You referenced running but didn't call it, put () after running so it looks like this running()