I'm having trouble getting a drop-down menu to work with a reptile image as the background. When I remove the image, the drop-down works fine. I've checked for errors but can't seem to find any. Is it an issue with the code or maybe a typing mistake?
Also, my background color gradient is only showing half the page and looks odd when the window is resized. I've tried various methods like setting width/height to 100%, using cover, and adjusting image height, but nothing seems to work. I want the image to stretch to fill the entire page both in height and width. It could be related to the body height, but I'm not sure how to fix it.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reptile Website</title>
<link rel="stylesheet" href="home.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header><nav><ul>
<!-- Dropdown menu HTML goes here -->
</ul></nav></header>
<div class="container">
<img src="reptile.png" alt="Reptile Background">
<div class="herp">Explore Herping<br>
<h3>Your home for Herpetology Information</h3> .
</div>
</div>
<footer>
<p>Sasha Batz | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c78580828386858cf4c7c0c1d0d1dac09ad9d7d7dfd79ad1d0c1">[email protected]</a></p>
</footer>
</div>
</body>
</html>