Recently, I picked up a project from codepen.io and made some modifications to it. However, I am currently facing an issue while trying to add a background image that won't display on the screen. Below is the snippet of my code:
body {
background-image: url("starwars.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
div.window {
color: white;
width: 500px;
padding: .42rem;
border-radius: 5px;
background: #26466D;
margin: 1rem;
text-align: center;
font-family: BlueHighway, Arial Black, sans-serif;
margin: 0 auto;
}
div.window label {
display: block;
background: #660b0b;
font-size: larger;
border-radius: 5px;
padding: .6rem;
transition: .4s all linear;
}
div.window label:hover {
cursor: pointer; background: #311;
}
input.toggle ~ div {
height: 0px; margin: .2rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 230px; }
input.toggle:checked + label { background: red; }
input.toggle { display: none; }<div style="height: 240px; padding-top: 1.2rem">
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">Use the Force, Luke.</label>
<div>
<img src="http://images.sequart.org/images/Star-Wars-still-use-the-force-luke-e1415132076759.jpg" style="max-width:100%;height:auto" alt="Ackbar">
</div>
</div>
</div>If anyone can help me figure out why the background image is not showing up, I would greatly appreciate it! Thank you.