Hello sir , here is he assignment, Creating fancy letterheaded paper - Learn web development | MDN (mozilla.org)
And this is my attempt . A Pen by Cleo (codepen.io)
Hello sir , here is he assignment, Creating fancy letterheaded paper - Learn web development | MDN (mozilla.org)
And this is my attempt . A Pen by Cleo (codepen.io)
Hi again, @Cleo_Shepsut
Very well solved!
Here are some comments:
background-image
background-position
and background-repeat
you could also group these properties with a background
property to easier see what belongs to what. This could then look like this:background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.2)),
url(top-image.png) no-repeat left top,
url(bottom-image.png) no-repeat left bottom;
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
Keep up the good work!
Stay safe,
Michael
Hello sir, thanks very much for the assessment and suggestions, I have followed your instructions as you can see, but I got issues with two aspects ,
Hi Cleo
You can’t upload images to CodePen. The difference between the logo and the other images is that you used the absolute URL (starting with https://) for the logo. This directly takes the image from the MDN GitHub page. You can do the same with the other images and copy the URL from the task page:
Your code should then be like this and everything looks correct:
background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.5) 20% 80%, rgba(0, 0, 0, 0.5) 100%),
url(https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-boxes/letterheaded-paper-start/top-image.png) no-repeat top,
url(https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-boxes/letterheaded-paper-start/bottom-image.png) no-repeat bottom;
That probably happened before you used the background
shorthand. The browser didn’t know which background-position
and background-repeat
it should use for which background-image
. Another reason why it’s a good idea to always use the shorthand property and having everything together.
Thanks very much sir, for providing the assessment correction and opinions, I will always follow your advice .