Learn CSS Variables by Building a City Skyline - Step 104 it says add background property when it has one

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

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

Link to the challenge:

Welcome to the community!
Unfortunately, the code never posted.

Could you please post your complete code using three backticks ``` before and after the code. This will need to be completed for both the html and the css code.

In this way the community can assist you. Please post your questions with the code to allow for a quick and proper guidance from the community?

You are doing great!

Looking forward to you receiving help from the forum.

1 Like

.fb5 {
width: 10%;
height: 33%;
background-color: var(–building-color2);
position: relative;
right: 10%;
background: repeating-linear-gradient(var(–building-color2 0% 5%), transparent 5% 10%);

it says add a background property to .fb5 when it already has one

The reason we ask for the complete code is sometimes the issue is outside of the entered code area. And, the error messages can be a bit deceiving because they tell you something about the code they expect. However, with outside code issues, the proper code does not register so the system is telling us it is not there.

:root {
–building-color1: #aa80ff;
–building-color2: #66cc99;
–building-color3: #cc6699;
–building-color4: #538cc6;
–window-color1: #bb99ff;
–window-color2: #8cd9b3;
–window-color3: #d98cb3;
–window-color4: #8cb3d9;
}

  • {
    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;
}

.building-wrap {
display: flex;
flex-direction: column;
align-items: center;
}

.window-wrap {
display: flex;
align-items: center;
justify-content: space-evenly;
}

/* BACKGROUND BUILDINGS - “bb” stands for “background building” */
.bb1 {
width: 10%;
height: 70%;
}

.bb1a {
width: 70%;
}

.bb1b {
width: 80%;
}

.bb1c {
width: 90%;
}

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

.bb1-window {
height: 10%;
background: linear-gradient(
var(–building-color1),
var(–window-color1)
);
}

.bb2 {
width: 10%;
height: 50%;
}

.bb2a {
border-bottom: 5vh solid var(–building-color2);
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}

.bb2b {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
var(–building-color2),
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%
);
}

.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3),
var(–window-color3) 15%
);
}

.bb4 {
width: 11%;
height: 58%;
}

.bb4a {
width: 3%;
height: 10%;
background-color: var(–building-color4);
}

.bb4b {
width: 80%;
height: 5%;
background-color: var(–building-color4);
}

.bb4c {
width: 100%;
height: 85%;
background-color: var(–building-color4);
}

.bb4-window {
width: 18%;
height: 90%;
background-color: var(–window-color4);
}

/* FOREGROUND BUILDINGS - “fb” stands for “foreground building” */
.fb1 {
width: 10%;
height: 60%;
}

.fb1a {
border-bottom: 7vh solid var(–building-color4);
border-left: 2vw solid transparent;
border-right: 2vw solid transparent;
}

.fb1b {
width: 60%;
height: 10%;
background-color: var(–building-color4);
}

.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4) 10%,
transparent 10%,
transparent 15%
),
repeating-linear-gradient(
var(–building-color4),
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%
);
}

.fb2 {
width: 10%;
height: 40%;
}

.fb2a {
width: 100%;
border-bottom: 10vh solid var(–building-color3);
border-left: 1vw solid transparent;
border-right: 1vw solid transparent;
}

.fb2b {
width: 100%;
height: 75%;
background-color: var(–building-color3);
}

.fb2-window {
width: 22%;
height: 100%;
background-color: var(–window-color3);
}

.fb3 {
width: 10%;
height: 35%;
}

.fb3a {
width: 80%;
height: 15%;
background-color: var(–building-color1);
}

.fb3b {
width: 100%;
height: 35%;
background-color: var(–building-color1);
}

.fb3-window {
width: 25%;
height: 80%;
background-color: var(–window-color1);
}

.fb4 {
width: 8%;
height: 45%;
position: relative;
left: 10%;
}

.fb4a {
border-top: 5vh solid transparent;
border-left: 8vw solid var(–building-color1);
}

.fb4b {
width: 100%;
height: 89%;
background-color: var(–building-color1);
display: flex;
flex-wrap: wrap;
}

.fb4-window {
width: 30%;
height: 10%;
border-radius: 50%;
background-color: var(–window-color1);
margin: 10%;
}
.fb5 {
width: 10%;
height: 33%;
background-color: var(–building-color2);
position: relative;
right: 10%;
background: repeating-linear-gradient(var(–building-color2 0% 5%), transparent 5% 10%);
}
.fb6 {
width: 9%;
height: 38%;
background-color: var(–building-color3);
}

html

City Skyline
<div class="foreground-buildings">
  <div></div>
  <div></div>
  <div class="fb1 building-wrap">
    <div class="fb1a"></div>
    <div class="fb1b"></div>
    <div class="fb1c"></div>
  </div>
  <div class="fb2">
    <div class="fb2a"></div>
    <div class="fb2b window-wrap">
      <div class="fb2-window"></div>
      <div class="fb2-window"></div>
      <div class="fb2-window"></div>
    </div>
  </div>
  <div></div>
  <div class="fb3 building-wrap">
    <div class="fb3a window-wrap">
      <div class="fb3-window"></div>
      <div class="fb3-window"></div>
      <div class="fb3-window"></div>
    </div>
    <div class="fb3b"></div>
    <div class="fb3a"></div>
    <div class="fb3b"></div>
  </div>
  <div class="fb4">
    <div class="fb4a"></div>
    <div class="fb4b">
      <div class="fb4-window"></div>
      <div class="fb4-window"></div>
      <div class="fb4-window"></div>
      <div class="fb4-window"></div>
      <div class="fb4-window"></div>
      <div class="fb4-window"></div>
    </div>
  </div>
  <div class="fb5"></div>
  <div class="fb6"></div>
  <div></div>
  <div></div>
</div>

i done what you said the error is still there i don’t think anything is wrong with the code otherwise it would have said this and that is missing but instead it is just saying .fb5 should have a background property

@anon42932716 gives one of the best advice! if you follow his advice you’ll probably pass this step. In addition you might want to read this FCC article and get a better understanding of how linear-gradient works.

Its pretty simple and you actually got the idea right you just have to switch each color stop to be a separate line like LB showed in his example…
You want to have one var(color) with a 5% for your starter color then add a comma another var(color) with a 10% declaring a stop to how much percent is its max. Repeat that with the transparent properties as well.

1 Like

.fb5 {
background-color:var(–building-color2);
width:10%;
height:33%;
position:relative;
right:10%;
background:repeating-linear-gradient(var(–building-color2 ) 0%, (var–building-color2) 5%, transparent 5%, transparent 10%);
}
still the problem is there bro as i said it is not the code it is the property which it says is missing eventhough it is there as you can see but now i wrote the code as you said it is giving code error

the code error is gone now all i had to do is put the percentage within the bracket it is now back to square one no background property eventhough it has one

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.