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

Vanilla JS/CSS

@pertrai1

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


Still having a hard time knowing how to use multiple background images and placement of them. Any help would be greatly appreciated. Not happy with the choices I made with the CSS.

Community feedback

@akpekig

Posted

You can use multiple background images by separating them with a comma like so:

background: url(...) ..., url(...) ...;

You can also split up the short-hand background into background-image, background-position, etc. This will make your styles more readable. In terms of positioning, "top", "center", etc. are default values that should be enough based on the designs, but if you need something more specific, you can use units like so:

background-position: 30% 43%, 50% 60%;

Unrelated, but mobile designs don't seem to be implemented and so the stars for each rating wrap (at least on my device)

0

@pertrai1

Posted

@akpekig thanks for the comments. I am not sure what you mean about the mobile design? I checked while I was designing and after being done to make sure it looked correct. On my iPhone I don’t see any wrapping. What other devices should I try to check with? Thanks

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