Order summary component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hi @tamerlantian 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  Here are some suggestions you might consider:

  • You could use the CSS backgrounds properties to set the background:

  body {
     . . .
     background-color: var(--main-bg-color);
     background-image: url(../images/pattern-background-desktop.svg);
     background-repeat: no-repeat;
     background-position: left top;
  }
  

  • background-color Set the background color.
  • background-image Set a background image.
  • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
  • background-position Sets the starting position of a background image.
  • You can also specify the size of the background image with background-size

  The background property is shorthand for all the properties mentioned above:

  background: var(--main-bg-color)
     url(../images/pattern-background-desktop.svg)
     no-repeat
     left top;
  

  References:

  1. CSS background Property
  2. Background property
  3. Background-repeat (MDN)

  • The music icon is for decoration purposes only, so it could be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-music.svg" alt aria-hidden="true">
  

  I hope those tips will help you.

  Good job, and happy coding!

  11