HTML5 Issue with backround-image and accompanied float image above it. Also cannot adjust opacity.
<p>I am coding a website for my kids and it is also an assignment for a class. I am trying to put an image in the body as a background with having text on top of it. The image finally did show up however the floating box above it is mid page and will not float right to the edge of the page. I am including the .css file. The image file is in the same file as everything else and there is a link to the file.</p>

<pre><code>h1 {
    color: green;
    text-align: center;  
}

h2 {
    color: green;
    text-align: center;
}

#header {
height:100px;
background:black; 
text-align: center;
text color: green;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:1000px;
    margin:0;
    dislay:block;
    color: #000000;
    background-image:url('trees.jpeg') &amp;nbsp;
    background-repeat: no-repeat;

}

#footer {
    height:50px;
    background:black;
    text color:green;
    text-align:left-side;
}

#content {
    height:1000px;
}

table {
        width:100%;
    Height:500px;
}
</code></pre>

<p>The link in the page looks like so</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="dio.css"&gt;
&lt;/head&gt;
</code></pre>

<p>My homepage is set up differently so I entered the information for the image straight into the page as it is not linked. This is the head.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
        #header {
            height:100px;
            background:green;
        }
    &lt;/style&gt;

    &lt;style&gt;
        h1 {
            color:black;
            text-align: center;
        }
    &lt;/style&gt;

    &lt;style&gt;
        h2 {
            color: green;
            text-align: center;
        }
    &lt;/style&gt;

    &lt;style&gt;
        p {
            text color:blue;    
        }

    &lt;/style&gt;

    &lt;style&gt;
        #sidebar {
            width:10%;
            height:1000px;
            float:left;
        }
    &lt;/style&gt;

    &lt;style&gt;
        #content {
            float:left;
        }
    &lt;/style&gt;

    &lt;style&gt;
        #advertising {
            width:10%;
            height:1000px;
            float:right;
        }
    &lt;/style&gt;

    &lt;style&gt;
        #footer {
            height:50px;
            text-align:center;
            background:green;
            text color:black;
            clear: both;
        }
    &lt;/style&gt;
    &lt;style&gt;
        body {
            margin:0;
            padding:0;
            width:100%;
            height:1000px;
            margin:0;
            dislay:block;
            color: #000000;
            background-image:url('trees.jpeg') &amp;nbsp;
            background-repeat: no-repeat;
        }
    &lt;/style&gt;
&lt;/head&gt;
</code></pre>

<p>What am I doing wrong? I researched the issue an have been trying different things to no avail.</p>