Design comparison
SolutionDesign
Solution retrospective
Some insights on how to apply the background images together with the gradients would help. Thank you
Community feedback
- @adityaphasuPosted about 1 year ago
Hello, @AbieroAlvin!
Since you are using TailwindCSS the one way you can apply background images with gradients is to actually add them to the config file inside
backgroundImage
like this:backgroundImage: { "pattern-mobile-gradient": 'url("../src/images/bg-pattern-intro-mobile.svg"), linear-gradient(to bottom, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))', "pattern-desktop-gradient": 'url("../src/images/bg-pattern-intro-desktop.svg"), linear-gradient(to right, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))', "pattern-circles-gradient": 'url("../src/images/bg-pattern-circles.svg"), linear-gradient(to bottom, hsl(237, 17%, 21%) , hsl(237, 23%, 32%))', },
- It's basically using a combination of image and gradient and then using it as a background (
bg-[your name for the custom background set in config])
- Though after using this you might want to manage the sizes, position of the gradient and image separately in your CSS file instead using
,
in the properties.
I think you can manage sizes and position using tailwind CSS too but I think it would lead to quite unreadble code in the jsx files hence I said to use CSS file to manage those.
Here is the link to my solution. I have also used tailwindcss so you can see how I have done it.
Good luck and happy coding!🙌🏻
Marked as helpful0 - It's basically using a combination of image and gradient and then using it as a background (
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