title: Why are my background images not showing in ie8?
body: <p>Last week I finished coding this site for a music business: <a href="http://academy.young1.org" rel="nofollow">http://academy.young1.org</a>.</p>
  
  <p>It worked like a charm in ie10 and chrome, and I was busy showing it to everyone, but when I switched over to ie8 I suddenly realised that all my background images had disappeared.</p>
  
  <p>There are other minor problems too (such as the text alignment of the top menu, the 'contact' page and the pagination on the WMU Slider Jquery plugin) but the background image issue is bugging me the most!</p>
  
  <p>I am using the css: 'body { background: url("img/yourimagehere"); }' syntax.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="header"&gt;
  
          &lt;div class="container_16 clearfix"&gt;
              &lt;ul class="nav grid_16 alpha"&gt;
                  &lt;li&gt;&lt;a class="&lt;?php if ($section == "Home") {echo "here"; } ?&gt;" href="index.php" accesskey="1"&gt; Home &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="&lt;?php if ($section == "About Us") {echo "here"; } ?&gt;" href="about_us.php" accesskey="2"&gt; About &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="&lt;?php if ($section == "What We Do") {echo "here"; } ?&gt;" href="what_we_do.php" accesskey="3"&gt; What We Do &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="&lt;?php if ($section == "Enrolement") {echo "here" ; } ?&gt;" href="enrolement.php" accesskey="4"&gt; Enrolement &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="&lt;?php if ($section == "Contact Us") {echo "here" ; } ?&gt;" href="contact.php" accesskey="5"&gt; Contact Us &lt;/a&gt;&lt;/li&gt;
                  &lt;!--&lt;li&gt;&lt;a href="http://youngacademyblog.blogspot.co.uk/" accesskey="6"&gt; Blog &lt;/a&gt;&lt;/li&gt;--&gt;
              &lt;/ul&gt;
  
  
              &lt;div id="logo"&gt;
                  &lt;a href="index.php"&gt;&lt;img src="img/Logo original.gif" alt="The Young Academy"/&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class = "grid_4 alpha"&gt;
  
              &lt;div class="telephone grid_4 alpha"&gt;
                  &lt;img src="img/phone_icon_white.png" alt="small telephone logo" class="align-left small" /&gt;
                  &lt;p&gt; +44 (0)20 8866 3813 &lt;/P&gt;
              &lt;/div&gt;
              &lt;div class="timezone"&gt;
  
                      &lt;p&gt;&lt;?php
                      date_default_timezone_set('Europe/London');
                      mktime(0,0,0,1,1,1970);
                      echo date('l, d F Y'); 
                      ?&gt; &lt;/p&gt;
  
                      &lt;!--&lt;form action="http://www.example.com/login.php"&gt;
                          &lt;p&gt;
  
                              &lt;input type="text name=search" size="20+" id="search" value="Search this site"
                          &lt;/p&gt;
                      &lt;/form&gt;!--&gt;
  
  
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
  
  &lt;ul class="secondmenu grid_6 push_3"&gt;
  
      &lt;li&gt;&lt;a class="&lt;?php if ($section == "Musical Glossary") {echo "here" ; } ?&gt;" href="glossary.php"&gt;Musical Glossary &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="&lt;?php if ($section == "FAQ") {echo "here" ; } ?&gt;" href="faq.php"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  
  &lt;ul&gt;                    
              &lt;/div&gt; 
  
          &lt;div class="container_16 clearfix"&gt;
  
              &lt;div class="wmuSlider"&gt;
                  &lt;div class="wmuSliderWrapper"/&gt;
  </code></pre>
  
  <p>etc.
  and my CSS:</p>
  
  <pre><code>/*html5 fix*/
  article, aside, figure, footer, header, hgroup, menu, nav, section {
      display: block;
  }
  
  
  body {
  
  
      background: url("../img/soft_wallpaper.png");
  
  
  
  }
  
  /****************
  header
  *****************/
  
  .header {
      background: #212962 url("../img/header_backgrounddark.png");
      height: 160px;
      width: 100%;
      /*z-index: 11; */
  
  
  }
  
  #logo {
      float: right;
      position: relative;
      top: -45px;
  </code></pre>
  
  <p>etc.</p>
  
  <p>The easiest way to compare might be to view the site in the two browsers and click 'view source'...</p>
  
  <p>I would appreciate it if anyone could help!</p>
  
  <p>Regards,</p>
  
  <p>Robert</p>