Is there anyway to maintain the width while adjusting the window height in css?

Question

Technically I have seen a design on a company website, which allows them to have their background-image set, having a fixed width while adjust the height. How can I do that? As I am trying to set the background of header and adjust the height of the window, the background-image size (width, height) is getting adjusted as well. I have no clue on it. Below is my css code

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    height: 500px;

    background-image: linear-gradient(315deg, rgba(17, 48, 247, 0.59), rgba(50, 183, 240, 0.41) 49%, rgba(83, 45, 233, 0.38)), url(https://cdn.discordapp.com/attachments/527505181039132677/977568384722034759/unknown.png);
    background-position: 50%, 25%;
    background-size: auto, cover;
    background-repeat: repeat no-repeat;
    background-attachment: scroll, fixed;
    width: 100%;
}