html,css and bootstrap

Community feedback

• 

  Carl•855

  @CarlHummPosted over 1 year 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 helpful

  0

  ---

  

  Engineer Providence•310

  @EngProvidencePosted over 1 year ago

  @CarlHumm thanks for the help I will try that

  0