Set background-size: contain on an overlay - html

Question

I'm trying to apply an overlay on top of a background-image, where the image has an attribute background-size: contain. For the overlay that I want to apply on top of it, it doesn't have a background image. All it has is a black background color with an opacity:
.overlay {
background-color: black;
background-size: contain; /* this isn't working */
opacity: 0.5;
}
The image that I want to overlay is 600x600. I want the same to be applied on the overlay too, but I can't because it's not an image; it's simply a black background. How can I get the same square dimensions for the overlay without setting a hard-coded width and without using background-size: contain?

Answer 1

if you want an overlaying transparent div check this out. I usually do it this way. i have a container div containing my background image and black colour div with required opacity to 0.5 (or any other value).
working fiddle https://jsfiddle.net/am2hyf3d/
set the containers width and height to a fixed value
#container{
height:300px;
width:300px;
}
i set the width and height of both the divs inside the container to occupy the containers entire space
#overlay{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
}

Answer 2

If you want simply for the image to come out darker than it really is, you could put it in a container with a black background and give the image itself a 50% opacity.
By making the container an inline-block, it will shape itself to the size of the image inside, so you won't have to specify an explicit size.
.container {
background:black;
display:inline-block;
}
.container img {
opacity:.5;
vertical-align:top;
}
<div class="container">
<img src="https://i.stack.imgur.com/30Bby.jpg">
</div>
For reference, the picture itself looks like this:

Answer 3

a few ways to darken a background-image without an extra element:
div {/* commun css for demo divs */
width:180px;
height:180px;
margin:10px;
background-image:url(http://lorempixel.com/180/180);
color:white
}
.gradient {
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(http://lorempixel.com/180/180);
}
.shadow {
box-shadow:inset 0 0 0 180px rgba(0,0,0,0.5);
}
.blend {
background-color:rgba(0,0,0,0.5);
background-blend-mode:multiply;
}
/* extra for layout */
div {
display:inline-flex;
vertical-align:top;
align-items:center;
justify-content:center;
text-align:center;
font-size:2em;
}
<div class="gradient">darken gradient</div>
<div class="shadow">darken shadow</div>
<div>plain normal</div>
<div class="blend">darken blend-mode</div>