Help needed: Creating Fancy Letterhead

MDN Learn
#1

I don’t know how to do this:

  • Adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture. Make it slightly dark right near the top and bottom, but completely transparent for a large part of the center.

I am trying to do it line line 44

ackground-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0,0,0,0),  rgba(0,0,0,0.2));

But it doesn’t seem to work. Could someone help me fix that?

Reference: MDN page for the test
Code: Fancy Letterhead in Glitch

#2

Hello @Arittra :wave: That letter is coming together nicely :+1:, you are on the right track here! Your problem doesn’t come from the linear-gradient function. By writing:

body {
  background-image: value1;
  background-image: value2;
}

You overwrite the first value1. In the second value you grouped several images at once, try adding the gradient to this group of value. Another thing to keep in mind when you do so, is that the order you write all these does matter!

body {
  /* the gradient is written in first position so it will be 
rendered in front of all the rest */
  background-image: linear-gradient(...),
    url(...),
    url(...);
}

I also noticed that these background-images were attributed to the <body> element but, since you already set the width and height of the <article> element to the dimensions of a letter, you might want to add these background-images to the <article> as well.

I hope this is enough help to finish the skill test!

1 Like