Dont know why fallback will not pass

Tell us what’s happening:
I dont know why this code will not pass,

Your code so far

  :root {
    --red-color: red;
  .red-box {
    background-color: #ff0000;
    background: var(--red-color);
    height: 200px;
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:

Read the instructions carefully. What property were you supposed to provide a fallback for?

It looks like a variable is being used to set the background color of the .red-box class. Let’s improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red.

I have looked up several articles and the codes all look like mine.

I’ll ask again. What is the property that you are supposed to provide a value for? What is the actual name of the property? What is the name of the property that you added?

This is the only challenge in the Responsive Web Design Certification that i have not passed including the 5 projects. So it will not give me a certificate. What am i missing?

What’s is the color of the variable?

The color of the variable is red

i have tried using red instead of #ff0000 still nothing

What’s the property with a variable for a value? Is it background-color?

i tried red-box color: red;

i tried using red-color also

The Variable is --red-color

i have tried using background-color: red; in the root element also

red-box is the property with a variable

Lose the -color part in your PROPERTY :slight_smile:

Easy way out
.red-box {
    background: red;
    background: var(--red-color);
    height: 200px;

Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.

Meaning you need another background property set to red.