Learn CSS Variables by Building a City Skyline - Step 40

i’ve added the background property and its still not proceeding

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </div>

    <div class="foreground-buildings">
      <div></div>
      <div></div>
      <div class="fb1"></div>
      <div class="fb2"></div>
      <div></div>
      <div class="fb3"></div>
      <div class="fb4"></div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>
/* file: styles.css */
:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: black;
}

* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings, .foreground-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position: absolute;
  top: 0;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background:linear-gradient(--building-color1,--window-color1);
}
.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1);
}

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color2);
}

.bb3 {
  width: 10%;
  height: 55%;
  background-color: var(--building-color3);
}

.bb4 {
  width: 11%;
  height: 58%;
  background-color: var(--building-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
  width: 10%;
  height: 60%;
  background-color: var(--building-color4);
}

.fb2 {
  width: 10%;
  height: 40%;
  background-color: var(--building-color3);
}

.fb3 {
  width: 10%;
  height: 35%;
  background-color: var(--building-color1);
}

.fb4 {
  width: 8%;
  height: 45%;
  background-color: var(--building-color1);
  position: relative;
  left: 10%;
}

.fb5 {
  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
}

.fb6 {
  width: 9%;
  height: 38%;
  background-color: var(--building-color3);
}
    

Your browser information:

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

Challenge: Learn CSS Variables by Building a City Skyline - Step 40

Link to the challenge:

i’ve added the background property and its still not proceeding

hello? im waiting for the response

You need to delete the background-color property.

i deleted it and its still not passing

its still saying that i should apply background to bb1a

hello? im still waiting for your respense

You also need to add var before each color. Here’s the correct syntax:

Mod edit - solution removed 

i get the same issue in another step and i tried this solution but its not working

.bb1d {
  width: 100%;
  height: 70%;
  background:linear-gradient (var(orange),var(--building-color1),var(--window-color1));

}
here's the code

Again, your syntax is incorrect. Go back to the step which explains how to use the linear gradient function or check this out.

I assume you want to use the color orange and not an actual variable. Pay attention to the spacing:

Mod edit: Solution removed 

Please stop posting solutions to fCC challenges on this forum.
We are here to help people learn to code not to help them to copy-paste.

As much as you are trying to be helpful and responding to this person, posting the solution is just derailing many others who use this platform.

Thanks for your understanding, and please continue to help with tips and hints from now on.