Feedback wanted for Creating fancy letterheaded paper

MDN Learn
#1

Hello!)
I did the task. My code Can you give me feedback please)
Here are 2 solutions I’m not sure about.

  1. I used ::before and ::after to create background for header and footer. Is this a possible solution?
  2. About this task - “* Add another background ad that simply adds a top image to the top of the email as a fallback for browsers that don’t support the previous ad.” In this case, the browser loads 2 identical images? Does it impair bandwidth?

If there is anything that could be done better, please, let me know)

#2

Hi @DiYuriivna and welcome to the community :wave:

Using ::before and ::after seems overly complicated. In CSS we can stack multiple backgrounds with the background property. Something like this would work:

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;

See how I also used only one gradient which goes from grey to white and back to grey?

The reason for the fallback top image is that older browsers don’t understand multi backgrounds. Bandwidth shouldn’t be a problem because modern browsers will cache the fallback image and reuse it in the other property.

The logo portion is fine. :+1:

I hope that helps. :slightly_smiling_face:

Michael

PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.

#3

Hi Michael! The background property is much simpler and shorter, thanks))
I did not notice that my email was visible, I already deleted it, thanks :slight_smile:

1 Like