I'm currently working on building a website using Bootstrap, and I have three backgrounds stacked on top of each other within separate divs. However, I'm facing an issue where only the first background is showing up and the second and third backgrounds are not displaying. This problem just appeared out of nowhere, as it was working fine before. I'm not sure if I accidentally made a mistake that caused this issue?
Here's the HTML code:
<body>
<div class="container-fluid one">
<nav>
<li class="nav-item">
<a class="nav-link" href="">HOME</a>
<br>
<a class="nav-link" href="">OVER DE CAMPAGNE</a>
<br>
<a class="nav-link" href="">WORD JIJ BESPEELD?</a>
</li>
</nav>
<img class="sire" src="img/Sire.png">
<h2 class="headline">Wees geen pop,<br>
want je valt hardop
</h2>
<div class="center"><img class="marionet" src="img/marionet.png">
</div>
</div>
<div class="container-fluid two">
</div>
<div class="container-fluid three">
</div>
</body>
And here's the CSS code:
a {
font-family: Zing Rust Demo Base;
text-decoration: none;
color: white;
font-size: 48px;
letter-spacing: 3px;
line-height: 1.75;
}
a:hover {
text-decoration: none;
color: white;
}
li {
list-style-type: none;
}
h2 {
font-family: Zing Rust Demo Base;
font-size: 36px;
color: white;
}
.headline {
padding-top: 400px;
padding-left: 15px;
}
.sire {
height: 50px;
width: 125px;
float: right;
margin-top: 450px;
}
.marionet {
width: 400px;
height: 700px;
margin-top: -800px;
margin-left: 570px;
}
.center {
display: inline;
}
.one {
background-image: url(../img/Deel1.png);
background-repeat: no-repeat;
}
.two {
background-image: url(../img/Deel2.png);
background-repeat: no-repeat;
}
.three {
background-image: url(../img/Deel3.png);
background-repeat: no-repeat;
}