Frontend Mentor - FAQ accordion solution

What are you most proud of, and what would you do differently next time?

I am most proud of successfully implementing the JavaScript functionality for the FAQ accordion. It was rewarding to see the hide/show feature come to life through DOM manipulation.

What challenges did you encounter, and how did you overcome them?

One challenge I encountered was figuring out how to make the background image cover only the top 25-35% of the viewport height.

Initially, I used the background image URL along with a second background color of light pink and positioned it at the top with a size of 100% (width) and 35vh (height), as shown in the code below. However, I noticed that as I reduced the height, the width was also shrinking. I tried various adjustments to the background properties to make it full width and 25% height, but I couldn't achieve the desired result.

body {
  background-image: url(./assets/images/background-pattern-desktop.svg);
  background-size: 100% 35vh;
  background-position: top;
  background-repeat: no-repeat;
  background-color: var(--lightPink);
  font-family: "Work Sans";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 16px;
}

Eventually, I overcame this challenge by using another div with a class called "background" and setting its width to full and height to 35vh. This solved the background positioning problem.

body {
  background-color: var(--lightPink);
  font-family: "Work Sans";
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.background {
  background-image: url(./assets/images/background-pattern-desktop.svg);
  position: absolute;
  top: 0;
  min-height: 35vh;
  z-index: -1;
  width: 100%;
}

However, I'm still curious why the background-size property didn't work for the image as expected. :confused:

What specific areas of your project would you like help with?

I would appreciate feedback on my approach to solve he background-image issue and would be happy to know from anyone why background-size property didn't work for the image as expected ?

Thanks, FEM is amazing community !!