Resizing image to autofit div in css

I am incredibly new to coding and am looking to autofit an image within a div in CSS. The code I've written just adds the background image in the CSS for the div, so haven't referenced the image file in the main HTML code.

Is there a way to resize the image within the div CSS or do I need to separate it out into div CSS and then image CSS (I hope I'm making sense!).

Or if there is a completely different way of doing it more efficiently please let me know - Any help would be greatly appreciated!

.test {
	border: 2px dashed #0087F7;
	background-color: #DCDCDC;
	background-image: url('download.png');
	background-repeat: no-repeat;
	background-position: center;
}

You can use the properties contain and cover in background-size to manipulate the background's size. You can also set a percentage.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  width: 150px;
  height: 50px;
  display: inline-block;
  border: 1px solid;
  background: url("https://picsum.photos/150/150");
  background-repeat: no-repeat;
  background-position: center;
}

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

<!-- language: lang-html -->

<div class="cover"></div>
<div class="contain"></div>

<!-- end snippet -->