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

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

CodePudding user response：

Remove the comma from background-size, you only use comma when dealing with multiple backgrounds

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <header></header>
</html>