CSS - Zablokowanie background image

Cześć, mam w projekcie background image, który wychodzi poza krawędzie viewportu - to zamierzone działanie, ponieważ chcę pokazać tylko część obrazka, jednak przy zmienianiu rozdzielczości okna przeglądarki pokazuje się więcej/mniej obrazka, co jest niepożądane.

.slider {
    background-image: url("../images/background.png");
    background-size: 120%;
    background-position: 5% 40%;
    height: 100vh;
    position: relative;
    filter: brightness(50%);
}

Ktoś mógłby mi trochę pomóc z tym problemem? Trochę utknąłem

Powalcz z media queries: https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
a jak coś zostanie to pomyślimy.

W przypadku body, mógłbyś zrobić coś takiego:

BODY {
  background-size:100% auto;
}

@media (max-aspect-ratio: 1920/1080) {
  BODY {
    background-size:auto 100%;
  }
}

Tylko tam sobie przestaw na 120% i dobierz aspect-ratio odpowiedni dla proporcji swojego obrazka.
Natomiast obawiam się, że nawet powyższe może zachowywać się dziwnie, jeśli dodasz do tego: background-position: 5% 40%;