Semantic HTML5 markup, CSS3, Flexbox, SASS, VanillaJS

Community feedback

• 

  LEUILLIER•120

  @JulienLEUILLIERPosted about 3 years ago

  Your code works, you just need to add height to .accordion-svg. By default backgrounds take the height of their container if I'm not mistaken, and if you use your browser Dev-tools you'll see the container has no height. Hope that helps !

  Marked as helpful

  1
• 

  Marcus Hugo•365

  @marcus-hugoPosted about 3 years ago

  I had the same problem when switching to desktop. What worked for me was placing the desktop illustration and bg-pattern as background-images.

  background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg);
  background-position:  -76px, -571px -248px;
  background-size: 472px, 966px;
  background-repeat: no-repeat;
  

  Hope this helps!

  Marked as helpful

  0
• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  @JulienLEUILLIER Thanks it is working fine now. Regards.

  0
• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  @MirthOsas it still doesn't work with the quotation marks.

  0
• 

  Osasere Edukhure•20

  @MirthOsasPosted about 3 years ago

  Hey buddy, the quotation mark is missing. The syntax for the background image should be something like this: background-image: url("...........");

  0
• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  @marcus-hugo

  Thanks for your time. I really appreciate it. However, the background is still not showing. I updated my code on Github and the live website. Please check it here: https://github.com/Babajide777/faq-accordion-card

  https://babajide-faq-accordion-card.netlify.app/

  Regards.

  0
• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  @marcus-hugo Thanks for the advice Marcos, but I used this method, and for some reason, the background image doesn't show up. Please what do you think might be wrong? This is the code:

  .accordion-svg {
      background-image: url(../images/illustration-woman-online-desktop.svg),
        url(../images/bg-pattern-desktop.svg);
      background-position: -76px, -571px;
      background-size: 472px, 966px;
      background-repeat: no-repeat;
    }
  

  0

  ---

  

  Marcus Hugo•365

  @marcus-hugoPosted about 3 years ago

  @Babajide777

  It may have something to do with the url path? You could try

  .accordion-svg {
      background-image: url(/images/illustration-woman-online-desktop.svg),
      url(/images/bg-pattern-desktop.svg);
      background-position: -76px, -571px;
      background-size: 472px, 966px;
      background-repeat: no-repeat;
    }
  

  or

  .accordion-svg {
      background-image: url(images/illustration-woman-online-desktop.svg),
        url(images/bg-pattern-desktop.svg);
      background-position: -76px, -571px;
      background-size: 472px, 966px;
      background-repeat: no-repeat;
    }
  

  Marked as helpful

  0