title: Why Isn't my page being fully viewed in Firefox but it is in Chrome
body: <p>So my website shows the images in google chrome but not in firefox! Anyone who can help? It only shows the background image in firefox! I've tried many things but nothing works for me. Anyone who can help :D</p>
  
  <p>website: <a href="http://z16-zacho.it.slotshaven.dk/html/index.html" rel="nofollow noreferrer">http://z16-zacho.it.slotshaven.dk/html/index.html</a></p>
  
  <pre><code>   body {
      background-color: transparent;
      color:saddleBrown;
      font-family:Verdana, Geneva, sans-serif;
      margin:0px 0px 0px 0px;
  }
  h1, h2 {
      color: black;
      text-align: center;
  }
  h1 {
      text-align: center;
      border-style: solid;
      border-color: rgb(176, 184, 196);
      border-radius: 100px;
      display: table;
      margin: 0 auto;
      margin-bottom: 20px;
      padding: 6px;
      background-color: white;
      opacity: 0.9;
  }
  h3 {
      text-align: center;
      color: black;
      font-size: 24px;
  }
  p {
      text-align: center;
      border-style: solid;
      border-color: rgb(176, 184, 196);
      display: table;
      margin: 0 auto;
      margin-top: 20px;
      padding: 6px;
      background-color: white;
      opacity: 0.9;
      color: black;
      font-size: 24px;
      font-weight: bold;
  }
  span {
      color: rgb(16, 140, 206);
  }
  ul {
      list-style-type: none;
      margin-top: -3px;
      padding: 0px;
      overflow: hidden;
      background-color: #333;
  }
  li {
      float: left;
      border-right:1px solid #bbb;
  }
  li:last-child {
      border-right: none;
      float: right;
  }
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  li a:hover:not(.active) {
      background-color: #111;
  }
  .active {
      background-color: #4CAF50;
  } 
  #boks1 {
      max-width: 48%;
      width: auto;
      padding: 0.5%;
      border: 1px;
      border-style: solid;
      border-color: purple;
      float: left;
      background-color: white;
      overflow: hidden;
  }
  #boks2 {
      max-width: 48%;
      width: auto;
      padding: 0.5%;
      border: 1px;
      border-style: solid;
      border-color: purple;
      float: right;
      background-color: white;
      overflow: hidden;
  }
  #background {
      background-image: url(../billeder/background.jpg);
      min-height: 500px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  #img-me {
      content: url(../billeder/billede_af_mig.jpg);
      width: 300px;
      height: 300px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      float: center;
      margin: 0 auto;
      display: table;
  }
  #head {
      content: url(../billeder/head.png);
      margin-bottom: 3px;
      background-color: rgb(238, 242, 254);
      height: 0 auto;
      max-width: 100%;
      float: center;
      margin: 0 auto;
      display: table;
  }
  #facebook {
      content: url(../billeder/fb.png);
      width: 16px;
  }
  #instagram {
      content: url(../billeder/instagram.png);
      width: 16px;
  }
  #twitter {
      content: url(../billeder/twitter.png);
      width: 20px;
  }
  #snapchat {
      content: url(../billeder/snap.png);
      width: 16px;
  }
  #normalP {
      font-size: 16;
      font-weight: normal;
      text-align: left;
      border-style: none;
      display: table;
      margin: 0 auto;
      margin-top: 20px;
      padding: 0px;   
      opacity: 1;
      color: black;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href="../css/frontpageStyle.css"  type="text/css" rel="stylesheet"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Zacool site&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;body id="background"&gt;&lt;/body&gt;
      &lt;header&gt;
          &lt;a href=" (link here was url shortened so i removed it) " target="_blank"&gt;
          &lt;div id="head"&gt;&lt;/div&gt;
          &lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="active" href="index.html"&gt;Forside&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Min valgfrie ting&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="kronik.html"&gt;Kronik&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="snapchat" href="snap.html" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://slotshaven.dk/" target="_blank"&gt;Slotshaven&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/header&gt;
      &lt;h1&gt;Velkommen! Denne side er kodet af &lt;span id="header-shadow"&gt;Tobias Zacho&lt;/span&gt;&lt;/h1&gt;
          &lt;div id="img-me"&gt;&lt;/div&gt;
          &lt;p&gt;&amp;#8595 &lt;span&gt;Scroll ned for mere info&lt;/span&gt; &amp;#8595&lt;/p&gt;
      &lt;body&gt;
          &lt;div id="background"&gt;&lt;/div&gt;
          &lt;div style="height:0px;background-color:transparent;"&gt;&lt;!-- Lavet så man får scrolling effekten! --&gt;&lt;/div&gt;
      &lt;/body&gt; 
      &lt;div id="boks1"&gt;
          &lt;h3&gt;
          Hvem er jeg?
          &lt;/h3&gt;
          &lt;p id="normalP"&gt;
          Test
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="boks2"&gt;
          &lt;h3&gt;
          Overskrift
          &lt;/h3&gt;
          &lt;p id="normalP"&gt;
          Test
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>