jquery - 背景画像が ie8 で表示されないのはなぜですか?

Question

先週、私は音楽ビジネスのためにこのサイトのコーディングを完了しました: http://academy.young1.org .

ie10 と chrome では魔法のように機能し、みんなに見せるのに忙しかったのですが、ie8 に切り替えたときに突然、すべての背景画像が消えていることに気付きました。

他にも小さな問題 (トップ メニューのテキストの配置、「連絡先」ページ、WMU Slider Jquery プラグインのページネーションなど) がありますが、背景画像の問題が私を最も悩ませています!

css: 'body { background: url("img/yourimagehere"); を使用しています。}' 構文。

これが私のhtmlです：

<div class="header">

        <div class="container_16 clearfix">
            <ul class="nav grid_16 alpha">
                <li><a class="<?php if ($section == "Home") {echo "here"; } ?>" href="index.php" accesskey="1"> Home </a></li>
                <li><a class="<?php if ($section == "About Us") {echo "here"; } ?>" href="about_us.php" accesskey="2"> About </a></li>
                <li><a class="<?php if ($section == "What We Do") {echo "here"; } ?>" href="what_we_do.php" accesskey="3"> What We Do </a></li>
                <li><a class="<?php if ($section == "Enrolement") {echo "here" ; } ?>" href="enrolement.php" accesskey="4"> Enrolement </a></li>
                <li><a class="<?php if ($section == "Contact Us") {echo "here" ; } ?>" href="contact.php" accesskey="5"> Contact Us </a></li>
                <!--<li><a href="http://youngacademyblog.blogspot.co.uk/" accesskey="6"> Blog </a></li>-->
            </ul>


            <div id="logo">
                <a href="index.php"><img src="img/Logo original.gif" alt="The Young Academy"/></a>
            </div>
            <div class = "grid_4 alpha">

            <div class="telephone grid_4 alpha">
                <img src="img/phone_icon_white.png" alt="small telephone logo" class="align-left small" />
                <p> +44 (0)20 8866 3813 </P>
            </div>
            <div class="timezone">

                    <p><?php
                    date_default_timezone_set('Europe/London');
                    mktime(0,0,0,1,1,1970);
                    echo date('l, d F Y'); 
                    ?> </p>

                    <!--<form action="http://www.example.com/login.php">
                        <p>

                            <input type="text name=search" size="20+" id="search" value="Search this site"
                        </p>
                    </form>!-->



                </div>

            </div>


<ul class="secondmenu grid_6 push_3">

    <li><a class="<?php if ($section == "Musical Glossary") {echo "here" ; } ?>" href="glossary.php">Musical Glossary </a></li>
    <li><a class="<?php if ($section == "FAQ") {echo "here" ; } ?>" href="faq.php">FAQ</a></li>

<ul>                    
            </div> 

        <div class="container_16 clearfix">

            <div class="wmuSlider">
                <div class="wmuSliderWrapper"/>

などと私のCSS：

/*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;

等

比較する最も簡単な方法は、2 つのブラウザーでサイトを表示し、[ソースを表示] をクリックすることです...

誰か助けていただければ幸いです！

よろしく、

ロバート