Semantic HTML5 markup, CSS3, Flexbox, SASS, VanillaJS

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 !

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!

@JulienLEUILLIER Thanks it is working fine now. Regards.

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

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

@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.

@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;
  }