Just working with one div here
<div id="particles-js" >
and in my CSS, I've got this:
#particles-js{
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("../js/image.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
But now I want to add a black overlay effect on the image before setting it as the background. How can I achieve that?
Image style:
.image {
width:100%;
vertical-align:top;
content:'\A';
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0.5;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}