A Problem with Linear gradient

HTML-CSS
1

Why is this code not working?

<style>
    div{
      border-radius: 20px;
      width: 70%;
      height: 400px;
      margin:  10 auto;
    }

    .A {
        background: repeating-linear-gradient(
        90deg,
        yellow 5px,
        black 40px,
        green 40px,
        red 80px,
        );
        z-index: 1;
        position: relative;
        left: 10px;
    }

    .B {
        background: repeating-linear-gradient(
        90deg,
        black 5px,
        cyan 40px,
        blue 40px,
        pink 80px,
        );
        z-index: 2;
        position: relative;
        left: 30px;
    }

    h1 {
        background:  rgba(42, 42, 119, 1);
    z-index: 3;
    }
  </style>

  <h1>WHY?</h1>
  <div class="A">  </div>
  <div class="B"> </div>

Challenge: Create a Gradual CSS Linear Gradient

Link to the challenge:

2

Hi @Sina.tr,

According to the original code for this challenge, you added too much things. You need to add only what is asked in the exercice. Here, you only need to add a background property for the div selector.

If you are testing things with this CSS code, you can share with us the HTML code you did too.

1 Like
3

the code is correct but assignment is:
Use a `linear-gradient()` for the `div` element’s `background`.

1 Like
4

Hi @LucLH,
Actually I was testing some of the codes in VS to better understand the underlying concepts. But this one code didn’t work, only header tag worked.

problem01
problem01526Ă—820 8.59 KB

5

I tested your code and I think the reason why you don’t see appear your backgrounds it is because you added a comma before the closing parenthesis for the repeating-linear-gradient methods used in your two selectors A and B.

Example:

.A {
  background: repeating-linear-gradient( 90deg, yellow 5px, black 40px, green 40px, red 80px, ); 
}

Remove these commas and it should be ok. Tell us if it is the result you were expecting. :slight_smile:

1 Like
6

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
7

Thank you so much @LucLH , now that the "div"s showed up I can explore more about colors and relative & absolute positioning.

1 Like
8

You’re welcome @Sina.tr. Have a good exploration in the CSS world :slight_smile:

1 Like
9

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