Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Ryan Southard
Ryan Southard
2,406 Points

Still seeing all black, unless I remove CSS code block for overlay.

I get a black screen on refresh every time. The only way I see to remove this is by deleting the CSS styling for the overlay. That's not covered in the video.

Once I remove the CSS, I get the image to appear, but the overlay isn't covering the rest of the screen. (It's there, but since it's unstyled, it's invisible.)

What am I missing? Is this a browser cache problem?

Hi Ryan,

Can you post your code here so we can take a look? Otherwise it would just be guessing.

2 Answers

Ensure you have the rgb ALPHA set to 0.7 like it states... it should look something like...

$("#overlay").css("background-color", rgba(0,0,0,0.7));

rgb(0,0,0) is a black and if you have a fourth value it becomes the transparency, 0.7 says 70% and so it becomes 70% transparent else it will be pure black.

with out seeing the CSS for the overlay this seems to be the most logical issue with your code.

Hey Ryan,

I also had some issues with the "background: rgba" CSS style as well. What ended up working for me was making sure there was no space between the "rgba" and the values.

e.g.

working code:

```background: rgba(0,0,0,0.7);

broken code:

```background: rgba (0,0,0,0.7);

I hope this helps with your overlay problem as well.

Good luck!