Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here?
<div className="container-fluid">
<div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent">
<div className="col-md-12 col-sm-12 col-xs-12 frContainer text-center">
<h2 className="col-md-12 col-sm-12 col-xs-12 text-center matchingTalentHeading">
Header Text
</h2>
<p className="col-md-12 text-center matchingTalentText">Test para text to add more in detail.</p>
</div>
</div>
</div>
**css**
.bgContainer {
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-size: 100% 100%;
height: 50vh;
opacity: 0.6;
}
.frContainer {
padding: 5.5em 3em;
}
.matchingTalentHeading,
.matchingTalentText {
z-index: 5;
color: black!important;
}