Design comparison
Solution retrospective
What is the best way of using ".svg images" as a background in css?
Community feedback
- @brasspetalsPosted about 4 years ago
Hi, Rafet! Good job on this challenge - it was definitely a tricky one!
A few suggestions to make it even better:
- making the whole question clickable in order to expand the answer, not just the arrow which is pretty small. Adding
cursor:pointerto the clickable area would also be a nice touch to show interactivity. - adding the orange hover style from the design to the question text
- adding a
max-widththe faq container on the mobile layout so that it doesn't stretch to be even larger than the desktop version before switching.
About your question - are you referring to using svg as a
background-image? If so, there's nothing wrong with it, and you treat it just like you would a jpg, png, etc. Sorry if this isn't what you meant.2@rafetbasturkPosted about 4 years ago@brasspetals
Hi Anna, thanks for your feedback. I have updated the code as you suggested.
About my question, I used "bg-pattern-desktop.svg" as a background in a div. But when the screen size gets smaller, the background image's position also changes. I want it to stay still as the screen gets smaller until the breakpoint. I tried the "fixed" property but I couldn't manage. What should I do to make the background image stay still?
0@brasspetalsPosted about 4 years ago@rafetbasturk Ah, I see what you mean! I believe because you have the position set in percentages, it acts responsively. If you wanted it to stay in a certain place you would have to use set values like px, which was what I did in my solution. You'll probably have to use some negative values to get it positioned right. Let me know if it works!
0@rafetbasturkPosted about 4 years ago@brasspetals Yeah, it worked. How I haven't thought of that! You were very helpful. Thanks for the solution.
0 - making the whole question clickable in order to expand the answer, not just the arrow which is pretty small. Adding
Please log in to post a comment
Log in with GitHub
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