Design comparison
Solution retrospective
I did the challenge using Tailwind. I had difficulty with backgroud-image.
Community feedback
- @at33vPosted 9 months ago
Hello, in your
output.css
file, there is no class for the background. Perhaps you forgot to run the CLI.You can add a background in various ways, here are a few of them:
- Tailwind class
bg-[url('../images/bg-pattern-top-desktop.svg'),url('../images/bg-pattern-bottom-desktop.svg')]
- Tailwind config
'pattern-desktop': "url('../images/bg-pattern-top-desktop.svg'), url('../images/bg-pattern-bottom-desktop.svg')",
- Custom class
@layer components { .my-custom-style { background-image: url('../images/bg-pattern-top-desktop.svg'), url('../images/bg-pattern-bottom-desktop.svg'); background-repeat: no-repeat; background-position: left top, right bottom; } }
Marked as helpful0@flaviare1sPosted 9 months agoThank you, @at33v ! 😊
If I want to do it through Tailwind Config, what should I type in the class?
0@at33vPosted 9 months ago@flaviare1s Something like this:
bg-pattern-desktop bg-no-repeat bg-[position:left_top,_right_bottom]
Marked as helpful0@flaviare1sPosted 9 months ago@at33v , the image does not appear. It's like she's blank. In the free design it also does not appear.
0@at33vPosted 9 months ago@flaviare1s You have an incorrect link to the
images
.- incorrect
.bg-mob-top { background-image: url('./images/bg-pattern-top-mobile.svg'); }
- correct
<img src="../images/icon-star.svg" alt="Star Icon">
Marked as helpful0@flaviare1sPosted 9 months ago@at33v , I corrected the address, but the image still doesn't appear. When I open the file in the image editor it doesn't appear either.
0@at33vPosted 9 months ago@flaviare1s You don't need to make direct edits to output.css; this file is generated by the Tailwind CLI.
Are you running the Tailwind CLI with a command like
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
?0@flaviare1sPosted 9 months ago@at33v , yeah, I am running this command. I think the problem is in the image file, as it doesn't appear.
0@at33vPosted 9 months ago@flaviare1s Image is present; you can verify this by going to your website, accessing the developer tools, and changing the image link for the element with the class
md:bg-des-top
.- current
'./images/bg-pattern-top-desktop.svg'
- to
'../images/bg-pattern-top-desktop.svg'
It's not very visible, but it's there. image link
Marked as helpful0 - Tailwind class
- @Bishalsnghd07Posted 9 months ago
Hi, is your font family: spartan is working?
1
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