I am new to website design and I have successfully created a slideshow. However, I am facing an issue with applying a background color to the heading so that it stands out over the image. Despite setting the background color in the CSS, it is not displaying on the heading.
Here is the HTML code:
<div class="slideshow">
<div class="slideshow-item-container">
<div class="slideshow-item">
<a href="humans/embryonic-development.html">
<img src="img/baby.jpg" alt="A newborn baby"/>
<h2 class="item-text">The Qur'an on Human Embryonic Development</h2></a>
</div>
<div class="slideshow-item">
<a href="humans/the-cerebrum.html">
<img src="img/brain.jpg" alt="The Cerebrum and Its Parts"/>
<h2 class="item-text">The Cerebrum in Quran</h2> </a>
</div>
<div class="slideshow-item">
<a href="humans/the-cerebrum.html">
<img src="img/ocean.jpg" alt="The Cerebrum and Its Parts"/>
<h2 class="item-text">Where the oceans meet</h2> </a>
</div>
<div class="slideshow-item">
<a href="humans/embryonic-development.html">
<img src="img/baby.jpg" alt="A newborn baby"/>
<h2 class="item-text">The Qur'an on Human Embryonic Development</h2></a>
</div>
</div>
</div>
And this is the CSS code:
*{
margin: 0;
padding: 0;
}
.slideshow {
overflow: hidden;
margin-top: 20px;
}
.slideshow-item-container {
position: relative;
width: 400%;
left: 0;
animation: 20s slider infinite;
}
.slideshow-item {
width: 25%;
float: left;
}
h2.item-text {
margin-top: -48px;
margin-right: 20px;
text-align: right;
background-color: #2b5072;
color: white;
}
Even though the background property is set in the CSS, the heading is still not displaying it. Here is a screenshot for reference: screenshot of site with no background color appearing on heading