To achieve the desired output, I have been attempting to position an image both inside and outside of a background element. However, despite my efforts using z-index and positioning properties, I have not been successful in accomplishing this task.
Below is the HTML code snippet that I have been working with:
<section id="testimonials">
<div class="container-fluid">
<h2 class="medium-title">What they’ve said</h1>
<div id="testimonial-slider" class="carousel slide" data-ride="true">
// More carousel item details...
<a class="carousel-control-prev" href="#testimonial-slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
// More carousel control details...
</div>
// Add button for getting started
If you would like to take a look at the full code and test it out, feel free to visit the following Codeply link. Hopefully, examining the code in its entirety will provide greater clarity on the issue at hand.