Improve Compatibility with Browser Fallbacks: What am I missing?

Tell us what’s happening:
I feel like I’m seriously missing something, but I dont know what it is. I keep getting the feedback:

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

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: var(--red-color, red);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

How would you normally set a background color without a css var? If someone visiting the site on a browser that doesn’t support var, it wouldn’t know what to make of that line so it will skip it, so it needs something that it will understand.

is the part of the code:

‘background: var(–red-color, red);’

not just that?
Reference: https://learn.freecodecamp.org/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable/

so, something more like:

  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }

I have done this but I can’t still get past it

If you create a thread using Ask for help button you will show your code and people will help

Be sure to not change the other background declaration at all

I have been able to do that. Thanks