Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

social proof section - achieved this using bootstrap and sass

@tafarathedev

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


no a question but i loved the challenge so much ,thank you

Community feedback

Shahin NJ 1,190

@SJ-Nosrat

Posted

Hi Tafara, Cool solution! I've taken a look at your code, I've noticed the following in your code:

body {
  font-size: 15px;
  font-weight: 700;
  height: 100vh;
  padding: 0 10px;

  /* YOU HAVE REPEATED THE BACKGROUND-IMAGE TWICE */
  /* The second `background-image` overwrites the first one */
  background-image: url("./images/bg-pattern-top-desktop.svg");
  background-image: url("./images/bg-pattern-bottom-desktop.svg");
  background-repeat: no-repeat;
  background-position: cover; /* INVALID VALUE */
  background-size: contain;
  width: 100vw;
  font-family: "Spartan", sans-serif;
}

Add the following code for the background-image only, as follows:

 body {
 background-image: url("./images/bg-pattern-top-desktop.svg"), url("./images/bg-pattern-bottom-desktop.svg");
 background-position: top left, bottom right;
}

top left applies to url("./images/bg-pattern-top-desktop.svg") and bottom right applies to url("./images/bg-pattern-bottom-desktop.svg"). Notice that the values in the background-position are comma separated.

You can learn more about background-position here.

Hope the above helps!

Keep on coding and best of luck with your coding journey!

Marked as helpful

0

@tafarathedev

Posted

@shahin1987 thank you so much for your help on that solution ,i really have never come across such and, it was a good experience handling more than two bg-images in a body section ,Thank You once more

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord