I have been working on a Bootstrap carousel and have set up custom CSS to assign background images to each of the three slides. However, I am facing an issue where the background image is not displaying correctly on the first slide, while it works fine for slides 2 and 3. I'm having trouble identifying the cause of this problem. I suspect it might be related to the active class being applied only to the first slide. Below is the HTML and CSS code for the first slide in myCarousel:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}