I am struggling with making the images in my 2 slide carousel full width. I have built the carousel using Bootstrap 4, and each slide has an image as its background.
Typically, I would use CSS properties like background-size: cover, background-attachment: fixed;, and background-repeat: no-repeat to achieve a similar effect on a webpage. However, applying these properties to the carousel elements didn't work as expected.
Below is the code snippet that includes the carousel setup and attempts to apply the background size, attachment, and cover properties:
<div id="officeCarousel" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#officeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#officeCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="office1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="card card-inverse card-success mb-3 text-center">
<div class="card-block">
<h4 class="card-title">Office 1</h4>
<p class="card-text">Work from the heart of the newly renovated area.</p>
<a href="#" class="card-link">About this office</a>
<a href="#" class="card-link">Book this office</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="office2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="card card-inverse card-success mb-3 text-center">
<div class="card-block">
<h4 class="card-title">Office 2</h4>
<p class="card-text">Work from this inner-city rural village.</p>
<a href="#" class="card-link">About this office</a>
<a href="#" class="card-link">Book this office</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#officeCarousel" role="button" data-slide="prev" >
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#officeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
If anyone can provide assistance with resolving this issue, it would be greatly appreciated!
Edit: Below is the relevant CSS sections. These are default styles from Bootstrap V4.
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden
}
.carousel-item {
position: relative;
display: none;
width: 100%
}