Jump to content
Search Community

Image backgroundColor does not apply

Richard Ryu test
Moderator Tag

Go to solution Solved by ohem,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...