I am struggling to make the image declared in bg fit into the container-fluid without overflowing. You can check out the live example at .
The main objective is to position the text on top of the image so that I can apply opacity and blur effects to the image without affecting the text.
I have attempted to use overflow:hidden;, but it seems to be ignored.
Furthermore, even when I replace the background images with a background-color, the issue persists.
<div class="container-fluid">
<div class="bg"></div>
<div class="row hero_header">
<h1>test</h1>
</div>
</div>
CSS
.bg /*this is the background image*/
{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("/images/record_wall_orig_two.jpg") 0px 0px;
background-size:cover;
height:100vh;
background-color: black;
-webkit-filter: blur(8px); / Chrome, Safari, Opera /
filter: blur(8px);
}