My navbar on this page is working fine, but the image that is supposed to be under it is not showing up. All I am trying to do is make the image "bubbles.png" show up under the navbar. I cannot use the img tag because it doesn't allow for stuff to go on top of it (Which is what I need) Any help?
Code: 

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>.</title>
<style type="text/css">
#main{
    background: url(http://www.poweredwebsite.com/images/bubbles.png) center;
    height: 50%;
    background-size: 60% 100%;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.navtext {
color: white;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
display: inline;
}
#nav {
background-color: #336699;
clear: both;
width: 100%;
height: 100%;
border-bottom: 2px darkred solid;
text-align: center;
}
</style>
</head>

<body>
<div id="nav">
<h2 class="navtext">Home&emsp;&emsp;&emsp;&emsp;</h2>
<h2 class="navtext">About us&emsp;&emsp;&emsp;</h2>
</div>
<div id="main">

</div>
</body>

</html>

```