title: Webpage background image won't load
body: <p>I'm using the following css to define my background:</p>
  
  <pre><code>body
  {
      background-image: url('background.png');
      font-size: 12pt;
      font-family: Veranda, Arial, Helvetica, sans-serif;
  }
  </code></pre>
  
  <p>The image <code>background.png</code> is stored in the root directory, but whenever I refresh the webpage, the background remains white. MY instructor currently has a copy of my files and is attempting to figure it out himself, though the problem wasn't obvious to him at a cursory glance. My full html and css are as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content = "text/html charset = utf-8" /&gt;
  &lt;link rel = stylesheet href = "style.css" type = "text/css" media = screen&gt;
  &lt;title&gt;
  Title
  &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id = "wrapper"&gt;
      &lt;div id = "leftsidebar"&gt;
          &lt;h3&gt; Navigation &lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div id = "content"&gt;
          &lt;h1&gt; Heading 1 &lt;/h1&gt;
          &lt;h2&gt; Heading 2 &lt;/h2&gt;
  
          &lt;p align = "justify"&gt; Paragraph 1.&lt;/p&gt;
  
          &lt;p align = "justify"&gt; Paragraph 2 &lt;/p&gt;
  
          &lt;p align = "justify"&gt; Paragraph 3 &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type = "text/css"&gt;
  &lt;!--
  body
  {
      background-image: url('background.png');
      font-size: 12pt;
      font-family: Veranda, Arial, Helvetica, sans-serif;
  }
  
  div#wrapper
  {
      width: 80%;
      margin-top: 50px;
      margin-bottom: 50px;
      margin-left: auto;
      margin-right: auto;
      padding: 0px;
      border: thin solid #000000;
  }
  
  div#header
  {
      padding: 15px;
      margin: 0px;
      text-align: centre;
  }
  
  div#leftsidebar
  {
      width: 25%;
      padding: 10px;
      margin-top: 1px;
      float: left;
  }
  
  div#content
  {
      margin-left: 30%;
      margin-top: 1px;
      padding: 10px;
  }
  
  div#footer
  {
      padding: 15px;
      margin: 0px;
      border-top: thin solid #000000;
  }
  --&gt;
  &lt;/style&gt;
  </code></pre>