Add an overlay pattern (png) over a div - html

Question

Is there a way using HTML to add an overlay using an image url in a specific div?
I managed to make something work using CSS :
#myDiv {
width: 100%;
height: 100%;
background: url(image.jpg) no-repeat;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
But it is a bit tricky. When I tried to do the same for other divs, it did not work. So for instance I have this CSS code for a div :
.hi-icon-wrap img
{
border-radius: 80px;
width: 153px;
height: 153px;
margin:2%;
}
and I want to add an overlay. I am using this script but with no success:
.hi-icon-wrap img:before {
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
and I also tested that :
.hi-icon-wrap img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .6;
}
UPD:
HTML script:
<div class="hi-icon-wrap" class="hi-icon-wrap img" style="text-align: center">
<img src="image.png">
</div>

Answer 1

You should use overlay on div element and not on img
#myDiv {
position: relative;
display: inline-block;
border-radius: 80px;
overflow: hidden;
}
#myDiv:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
opacity: .8;
}
img {
vertical-align: top;
}
<div id="myDiv">
<img src="http://placehold.it/150x150/D6E7FF/ffffff">
</div>
Edit: You can't use :after or :before on img as you can see here Demo because image elements don't contain text or have descendants, so what you can do is wrap img in div for example and then you get this Demo