title: css background image covers header and text
body: <p>Any ideas on why my external css sheet won't cooperate? I need the content of my page to rest below the background image.
  Here is my html code...I will place the external css snippet below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="AlbumPage.css"&gt;
      &lt;link &lt;link href="https://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet"&gt;
          &lt;title&gt;Album Page &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="Album Art"&gt; 
      &lt;/div&gt;
      &lt;span style="margin-top: 500px"&gt;
              &lt;h1&gt;Captain Fantastic and the Brown Dirt Cowboy&lt;/h1&gt;
          &lt;center&gt;&lt;a href="http://ultimateclassicrock.com/elton-john-captain-fantastic/" target"_blank"&gt;Elton John&lt;/a&gt;
          &lt;p&gt;May, 1975&lt;/center&gt;&lt;/p&gt;&lt;/center&gt;
          &lt;table border="1" width="100%"&gt;&lt;/table&gt;
          &lt;h2&gt;&lt;bold&gt;&lt;center&gt;Band Members and Producers&lt;/center&gt;&lt;/bold&gt;&lt;/h2&gt;
  
  
  css:
  body{background-image: url("Captain Fantastic Full Album Art.jpg"); 
      background-repeat: no-repeat;
      background-position: center top;
      height: 200px
      width:350px;}
  
  h1 {font-family: 'IM Fell English', serif; text-align: center; }
  h2 {font-family: 'IM Fell English', serif; text-align: center;}
  </code></pre>