How to change div background on dragover when also contains image - css

Question

I have a dropzone where user can drop an image, it has some associated CSS that makes the dropzone background go grey as they drag the image, giving a visual cue.
Html
<div>
<figure>
<div id="dropzone">
</div>
</figure>
</div>
CSS
#dropzone {
border: 3px solid black;
min-width:300px;
min-height:100px;
max-width:300px;
max-height:100px;
}
#dropzone.dragover {
background: rgba(0, 0, 0, .5);
}
But I don't want the dropzone to be empty I would like it to have a starting image (which says something like 'Drop Files Here')
<div>
<figure>
<div id="dropzone">
<img src="dropzone.jpg"/>
</div>
</figure>
</div>
and if I add this, then the dropzone doesnt grey out when drag an image over, how do I fix this?

Answer 1

Try setting the background image with CSS property background-image
#dropzone{
background-image: url(path/to/your/image);
/* rest of the css goes here*/
}
#dropzone {
border: 3px solid black;
min-width:300px;
min-height:100px;
max-width:300px;
max-height:100px;
background-image:url(https://images.pexels.com/photos/577775/pexels-photo-577775.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#dropzone.dragover {
background: rgba(0, 0, 0, .5);
}
<div>
<figure>
<div id="dropzone">
</div>
</figure>
</div>

Answer 2

I got two solutions for you:
First I display the image as a background-image and then I filter it in the fist solution to be grayscale (More about filter here) and in the second solution I just overwrite the background to just be gray.
#dropzone1,
#dropzone2 {
border: 3px solid black;
min-width: 300px;
min-height: 100px;
max-width: 300px;
max-height: 100px;
background-image: url(https://picsum.photos/300/300);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#dropzone1:hover {
filter: grayscale(100%);
}
#dropzone2:hover {
background: rgba(0, 0, 0, .5);
}
<div>
<figure>
<div id="dropzone1">
</div>
</figure>
</div>
<div>
<figure>
<div id="dropzone2">
</div>
</figure>
</div>

Answer 3

You can use opacity on the dropzone.
#dropzone.dragover {opacity:0.5}
Because background is only the background-color of the element.