https://i.sstatic.net/mKmIW.png
I have encountered an issue where a white background is covering the background image in my coding project. Despite trying to add background-color: transparent;, I wasn't able to remove the white background. How can I resolve this and ensure that the text remains visible over the background image?
The framework I am using for this project is Bootstrap 5.
* {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
html {
background: url(http://ndquiz.epizy.com/img/worldPersonalProject.png) no-repeat center fixed;
background-size: cover;
}
.btn-select {
background-color: #008cba;
border-radius: 10px;
text-align: center;
}
.main {
margin-top: 100px;
background-color: transparent !important;
}
.big {
font-size: 60px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8cdd6c8d6ca">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main class="text-justify text-center main">
<h1 class="big">Flag Quiz Game</h1>
<div>
<h2>Select Gamemode</h2>
<a href="">Learn</a>
<a href="">All (254)</a><br />
<a href="">All Sovereign (195)</a><br />
<a href="">Easy (15)</a><br />
<a href="">Medium (30)</a><br />
<a href="">Hard (60)</a><br />
<a href="">Africa (55)</a><br />
<a href="">Americas (35)</a><br />
<a href="">Asia (51)</a><br />
<a href="">Europe (50)</a><br />
<a href="">Oceania (14)</a><br />
</div>
</main>
<footer>
Flags from <a href="https://flagpedia.net/" target="_blank">Flagpedia</a>
</footer>