Blogr landing page with react and tailwind.

Solution retrospective
Some insights on how to apply the background images together with the gradients would help. Thank you
Please log in to post a comment
Log in with GitHubCommunity feedback
- @adityaphasu
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 helpful - It's basically using a combination of image and gradient and then using it as a background (
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