How do I add a background to the .bb1a (my code is not working) - step 40

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>    
<head>
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />   
</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/102.0.5005.63 Safari/537.36

Challenge: Step 40

Link to the challenge:

2

you forgot to use “var” keyword for each of those “css variables”, as it is shown in “background-color” just above it!!

3 
 background: linear-gradient( var(--building-color1), var(--window-color1) );

Still returning " You should apply a background to .bb1a ." idk why :frowning:

1 Like
4

I COPY AND PASTE THE ANSWER IN THE NEXT STEP TO THE STEP 40 AND STILL SAYING " You should apply a background to .bb1a ."

Pls help, im stuck on 40+

5

sorry i fix it, i putted my background down the background-color and then it workded at end. Sorry but now you know what if you write the code like this:

bb1a {
 background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}

DOWN IS THE KEY!!

bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );
}
1 Like
6

good job fixing that, but not necessarily needs that extra formatting to pass this step, i used your tried out code and it passes just fine
Mod edit: solution removed

2 Likes
7

Thanks so much I was really stuck here but i finally got the answer.

8

the instructions on these no. 40+ steps are not clear at all. Literally just wasted like 10 minutes wracking my brain trying to figure out what I was doing wrong (the preview was showing up correct) and like the other person said, you need you put it exactly where the learning program wants you to put it, which is very annoying sometimes because one has clearly followed the instructions given properly. either give the right instructions or don’t require stuff you can’t predict!!

9

Exactly, it doesn’t help that the mods deletes the actual solution in other posts about this lesson, only to get people to “figure it out” by doing extra searches.

10

You can always open a new topic and get help. We do not want you to search for a solution, rather to learn how to find your own solution.

11

I was stuck for like 30 minutes because my properties were not indented