Design comparison
Solution retrospective
I had a problem with adding the svg background icons
Community feedback
- @CarlHummPosted almost 2 years ago
Hi there, good job on the task
I'm not sure how to do it in Bootstrap but...
Your SVG icon isn't working because:
- The image URL is incorrect, it should include images/ and quotations
- Your inline style background-image is being overwritten by the background property. which can be used to define multiple properties
Shorthand inline style
<div class="card" style="background: url('images/bg-pattern-quotation.svg') no-repeat right 6rem top / 140px, center center / cover, linear-gradient(rgba(115,63,200,0.8), rgba(115, 63, 200, 0.9));"></div>
It would probably be a-lot less confusing if you separated the styles into a class. For example.
You could create a quote class
.quote { background: url('images/bg-pattern-quotation.svg'), linear- gradient(rgba(115,63,200,0.8),rgba(115,63,200,0.9)); background-position: right 7rem top, center center; background-repeat: no-repeat; background-size: 140px, cover; }
Then you could add that class to your card
<div class="card quote"></div>
There are of-course other ways you could add the SVG to your card. For a more in-depth look into SVG you could read this or this
These aren't exact values. I'm not sure if there is a bootstrap way to do it.
Marked as helpful0@EngProvidencePosted almost 2 years ago@CarlHumm thanks for the help I will try that
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