Hey there, I'm new to HTML and CSS and I've been trying to create a responsive landing page. I managed to display text on an image by adjusting the image's style to relative and the text's style to absolute. However, when I resize the site for mobile or tablet view, the text ends up going under the second image. I'm not sure where I might be going wrong here. Any guidance would be greatly appreciated.
Could you please suggest the best approach to displaying text on images while also ensuring the site remains responsive?
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img class="bg_image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<h2 class="Lorem_Headding">Lorem ipsum </h2>
<p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam vulputate ut pharetra sit amet aliquam id diam. Tempor orci dapibus ultrices in iaculis nunc sed. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.</p>
</div>
</div>
</div>
.bg-image {
position: relative;
}
.Lorem_Headding{
position: absolute;
color: rgb(255, 255, 255);
top: 200px;
left: 50px;
width: 100%;
}
.p-text{
color: white;
position: absolute;
top: 250px;
left: 50px;
width: 660px;
}