Assessment and help wanted for creating letterhead test (CSS)

Hello!
I would appreciate if someone could kindly check my work on CSS comprehension test, “Creating fancy letterhead paper”.

I struggled quite a lot so I have many questions… :sob:
(I put the same questions at the bottom of my CSS sheet as a comment.)

  1. Is the way how I fixed top and bottom images correct?

  2. How can I provide a fallback for the background image?
    I guessed background-image: property has less browser support than background: property,
    but as far as I saw the MDN browser support table,
    the support for these two properties seemed similar enough…?

    Also, why does the assessment ask for a fallback only for the top image,
    not the gradient and the bottom image?

  3. To apply layered backgrounds (images and gradients),
    it seems like both background: property and background-image: property
    can be used for this purpose…
    But which is better? How can I decide which property to use?

  4. Is the way I applied drop shadow to the logo correct?
    Also, for the more conventional approach, which was asked to put in a comment for the assessment,
    I used box-shadow… but is this right?

My work:

Assessment page:

Hi @Risa

Ohhh, does are a lot of questions :sweat_smile: I’ll give my best!

background and background-image

background is a shorthand property for multiple background-* properties (including background-image). When using multiple background it’s easier to use background. You can put all the necessary values per background together on one line and use a comma to separate it from the next background. I know that sounds complicated. :grin: I think it get a lot clearer when we have a look at the solution:

article {
  background: url(top-image.png) no-repeat left top;
  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;
  background-color: white;
  border-top: 1mm solid red;
  border-bottom: 1mm solid red;
}

The second background property with three lines replaces your four background-* properties. See how it’s much easier to know which values belong together?

Fallback image

The reason for a fallback image isn’t about background vs background-image, but about the support for multiple backgrounds and linear-gradient in older Internet Explorers. That’s why there’s only one image in the fallback line. That’s not as relevant today as it was some years ago. Those old browser can be ignored by now.

The first line in the solution above is the fallback background. All browsers first set the fallback background. Old browser don’t understand the second background and ignore it. Modern browsers understand it and overwrite the fallback background.

Logo

Both versions are correct! :+1:


I hope I could answer all your questions. Otherwise, as usual, just ask. I’m happy to help. :slightly_smiling_face:

Have a nice day,
Michael

1 Like

Hi Michael,

Thank you so much for answering to my questions! :blush:
Now my understanding about multiple backgrounds and background (shorthand) property is much clearer!

However, I’m sorry, but I have one more question…
For the background-position value in the shorthand, I can see that you set “left top” for the top image and “left bottom” for the bottom image.

Is it better than “center top” and “center bottom”? If so, could you also tell me why?

Thank you so much for your always kind and helpful advice!

Never be sorry for asking questions. Especially, because this is a good one! :grin:
In this case it doesn’t really matter since the image is only a few pixel wider than <article>.
If you change the width of the article from 210mm to 110mm, you will see a big difference between left, center and right. Then it’s a design choice which version you like best.

1 Like

Sorry for my late reply!

Thank you so much for your answer, now I can see that, in this case, aligning the background image to left looks better than centre or right with smaller width! :blush:

I will keep this in mind and try to choose the right way to position the image, depending on the design in the future!

1 Like