Design comparison
Solution retrospective
how can i sit background imgs better? **how can i make this project with best practice ? ** I am still learning ..all feedback is welcome
Community feedback
- @sarvothamgowdaPosted about 2 years ago
Hey, good job!
Especially on aligning the testimonial cards as per the design. The only thing where you can work on is the background image position. Here is my solution.
- mobile version:
body { background: url(./images/bg-pattern-bottom-mobile.svg) no-repeat fixed bottom right, url(./images/bg-pattern-top-mobile.svg) fixed no-repeat top left; }
- desktop version:
body { background: url(./images/bg-pattern-bottom-desktop.svg) no-repeat fixed bottom right, url(./images/bg-pattern-top-desktop.svg) no-repeat fixed top left; }
Marked as helpful0@Abdelrahman0KhaledPosted about 2 years ago@sarvothamgowda it's work . thank you bro
0 - @correlucasPosted about 2 years ago
πΎHello ABDELRAHMAN KHALED, congratulations for your new solution!
Your solution is just amazing, the only thing you need to fix is the top and bottom background positions. You can give the background a better position to the body with these properties:
body { display: flex; background-color: var(--bg); background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg); background-position: left -185px top -236px, right 10px bottom -300px; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; background-size: contain, contain; justify-content: center; }
π I hope this helps you and happy coding!
1@Abdelrahman0KhaledPosted about 2 years ago@correlucas hay man..I am very happy for your answer to my question..I am very happy that you saw my solution and liked it..But despite my extreme happiness, this answer is not practical because it is in pixels..what will fit with your screen is not suitable for all screens. And I am still in the learning stage.. Regardless of your answer, which I cannot evaluate because my level is too low to evaluate it and you know more than me and I cannot say that it is not my work.. but I do not understand it yet.. So, is it possible to teach me how to learn And how do I strengthen my social networking sites..because I do not know what to publish..and I do not have accounts on most social networking sites.
0
Please log in to post a comment
Log in with GitHubJoin 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