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 Zimmerman
Ryan Zimmerman
3,854 Points
Posted by Ryan Zimmerman
Ryan Zimmerman
3,854 Points

Overlay not showing up. background: rgba(0,0,0,0.7); inspect shows: ! - Invalid Property value picture shows

It showed when we first test and get the black screen. Any help would be appreciated.

overlay {

background-color: rbga(0,0,0,0.7); or background width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; }

5 Answers

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Have you tryed to use spaces like background: rgba(0, 0, 0, 0.7); instead of the values tied together

plus your given code has rbga instead of rgba :)

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

I see that you have display none. Are you triggering anything in the JS to have it display block? Also, is "overlay" a class or ID because if it's a class it should be .overlay and if it's an ID it should be #overlay, and that seems to be missing from your code.

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Ryan,

Try updating your CSS to:

#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

This is the exact code that is used in the challenge. Starting there will help us determine if it is an error with the CSS you are using or somewhere else.

Ryan Zimmerman
Ryan Zimmerman
3,854 Points
Ryan Zimmerman
Ryan Zimmerman
3,854 Points

https://w.trhou.se/i87xd1i1kb

Its an id and it is in the actual code. Not sure if you can see the snapshot link above. Tried both background and background color. This is the Lightbox challenge with the overlay. The actual div is working fine, i just have no color or opacity. He had display: none.

Ryan Zimmerman
Ryan Zimmerman
3,854 Points
Ryan Zimmerman
Ryan Zimmerman
3,854 Points

TYPOOOOOOSSSS!!!! Thanks guys!