The reason for this behavior is that the parent element has a background-image property, which means that if you nest text within a div with a background-image, it will appear on top. To resolve this issue, you can close the div containing the background and then start your container and row elements.
I have included a dummy image to illustrate this concept.
.firstsection {
height: 70vh;
background-image: url(https://dummyimage.com/600x400/000/fff);
background-size: cover;
}
.text {
font-size: 50px;
color: red;
}
.secondsection {
height: 30vh;
background-color: #151519;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c5749574b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="firstsection"></div>
<div class="container">
<div class="row">
<div class="col-lg-12 text">
<p>test</p>
</div>
</div>
</div>
<div class="secondsection"></div>
If you wish to maintain similar markup, remove the image from the background and use the img tag instead. You can then add the flex-column class and specify width: 100%; on the img to achieve the same appearance as a background image. Additionally, set margin: 0; on the body element to ensure full-width display.
.firstsection {
height: 70vh;
/*background-image: url(background.svg);*/
background-size: cover;
}
.text {
font-size: 50px;
color: red;
}
.secondsection {
height: 30vh;
background-color: #151519;
}
img {
width: 100%;
}
body {
margin: 0;
}
<div class="firstsection">
<div class="container">
<div class="row">
<div class="col-lg-12 w-100 flex-column text">
<img src="https://dummyimage.com/600x400/000/fff">
<p>test</p>
</div>
</div>
</div>
</div>
<div class="secondsection">
</div>
Edit made so that the text sits on top of the background image.
.firstsection {
height: 70vh;
background-image: url(https://dummyimage.com/600x400/000/fff);
background-size: cover;
background-position: center;
}
.text {
font-size: 50px;
color: red;
}
.secondsection {
height: 30vh;
background-color: #151519;
}
<!-- Your index file structure should be like this -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf3ecf1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="firstsection">
<div class="container">
<div class="row">
<div class="col-lg-12 text">
<p>test</p>
</div>
</div>
</div>
</div>
<div class="secondsection">
</div>
</body>
</html>