Background-image not taking full width on resizing

Question

I'm building my first website (it's a portfolio), I created 3 different background image for each section that alternate (home, about, skills, etc.). I'm using SASS (SCSS syntax) and I noticed that when I resize my window by reducing the total width of the page, the background-image isn't occupying the full width of the section anymore but it stretches to the left side (for some reasons I noticed it happens below ~950px). I really like this pattern I found so I would like to keep it. I'm gonna share the code on the about section for example (but they are all structured the same way), hope you can help me understand where I went wrong. It doesn't stretch on the height though, on the Y axis the website behaves like it should

#about {
  @extend %section;
  @extend %background-light;
}

These are the extentions

%background-light {
  background-image: radial-gradient($background-dot-color2 1px, transparent 1px), radial-gradient($background-dot-color2 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  background-color: $background-color2;
}

%section {
  padding: 2% 10% 5% 10%;
  scroll-margin-top: 8vh;
  height: auto;
  min-height: 92vh;
  width: 100%;

And these are the general properties I gave to my main style.scss

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: $font-stack;
}



html {
  scroll-behavior: smooth;
  cursor: default;
}

(this unusual min-height value is because I have a JS function to make header appear and stay fixed on scroll/section change through navbar and I wanted both header and section to cover the full viewport height)

Things I tried

Removed every other property and only gave a background color (in #about) to see if the problem would still be there and it is;

---

Giving a min-width of 100vw to body/section and both; tried to give a height and a width of 100% to body/html and both;

---

Removing width:100% from %section.

Answer 1

You can try background-size: cover; to make the image resize to the parent's size while maintaining aspect ratio.

https://www.w3schools.com/cssref/css3_pr_background-size.php