It's not just about z-index, but also about the use of overflow.
When dealing with svg, remember to include the CSS properties height, width, overflow in your code.
var line = $('#connectedLines');
var div1 = $('#node1');
var div2 = $('#node2');
var x1 = div1.offset().left + (div1.width());
var y1 = div1.offset().top + (div1.height()/2);
var x2 = div2.offset().left + (div2.width()/10);
var y2 = div2.offset().top + (div2.height()/2);
line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2);
.parentContainer {
background-image: linear-gradient(to bottom, rgb(253, 118, 49,1) 25%, rgb(255, 157, 107,0.5));
background-color: #FD7631;
height: auto;
padding-bottom: 50px;
top: 0;
z-index: -1;
}
.backgroundLines{
background-image: url("/assets/imgs/lines_background_5.png");
background-size: cover;
width: 100%;
height: 50%;
/* margin-top: -400px;*/
}
#lines{
background-image: url("/assets/imgs/lines_background_5.png");
/* display: inline; */
width: 100%;
height: 25%;
margin-top: -300px;
}
#svg{
position: absolute;
display: block;
top: 0;
left: 0;
width: 80px;
overflow: visible;
}
#connectedLines{
display: block;
stroke-width:10px;
stroke: black !important;
}
.img{
background-image: url("/assets/imgs/img_8.jpg");
height: 500px;
width: 75%;
background-size: cover;
margin-top: 50px;
}
.comoHR {
display: block;
background-color: black;
width: 50%;
border: 0;
height: 8px;
}
.leftContainer{
width: 25%;
height: auto;
}
.leftDivContainer{
background-color: white;
width: 80%;
height: 250px;
border-radius: 50%;
}
.leftImage{
height: 50%;
width: 50%;
}
.middlePad{
margin-top: 60px;
}
.leftText{
width: 30%;
height: auto;
padding-top: 20px;
}
.comoText {
padding-top: 20px;
}
.midContainer{
width: 25%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="parentContainer">
<div class="backgroundLines">
<div class="d-flex justify-content-center imgParent">
<div class="img">
</div>
</div>
<br><br><br><br>
<!-- textt in the top -->
<div class="d-flex justify-content-between">
...
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Codepen link for the same example: https://codepen.io/anon/pen/QXwpmR