Reports

To keep a div height and width flexible and making sure the background image stretches with the div, you need to use background-size: cover or contain values. However, there are pros and cons to both approach

background-size: cover would stretch the image to fit the container, while maintaining aspect ratio. However, it would clip the image if aspect ratio of image does not match that of the container.

background-size: contain would stretch the image to fit the container, while maintaining aspect ratio, AND ensure the entire image is visible at all times. However, it would leave empty spaces to side or above/below the image if aspect ratio of image does not match that of the container.

Lastly background-size: 100% 100% would keep the image stretched to container size, but would result in distortions as it does not try to preserve aspect ratio.

Here is a code you can try out

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Image Example</title>
  <style>
    body{
        height: 100vh;
    }
    .background-div {
      width: 100%; 
      height: 100%; 
      background-image: url('https://via.placeholder.com/400x300'); 
      /* Change to contain to see both effects */
      background-size: cover; /* Scale the image to cover the entire div */
      background-repeat: no-repeat; 
    }
  </style>
</head>
<body>
  <div class="background-div"></div>
</body>
</html>

I have created a full HTML Background Images course playlist on YouTube which has detailed coverage of all these options with code examples. Most of code examples in common issues portion are using a div to hold background image so i think you would get good coverage of what you are trying to accomplish and more. I would strongly encourage to watch this so you can handle all of these and result in a professional grade webpage which looks good in all scenarios. It has concept videos as well as individual videos for common issues with background images. Please do let me know if it solved your query. If you like reading instead of watching, you can refer to article series version here

79257317