Jquery 单击时淡入不同的背景图像

单击按钮时，在新的背景图像中淡入淡出时遇到一些问题。此外，点击后背景图像不会覆盖页面。不确定我的htmt/css是否相关。感谢您的帮助

html：

   <section class="banner"></section>

<div class="container">
    <header class="sixteen columns l-main-head">
        <h1>シアトル</h1>
    </header>

    <nav class="sixteen columns m-btn-artCont">
        <button class="m-btn-mainArt">学ぶ</button>
    </nav>


    <section class="one-third column m-lorem">
    <p>こでど</p>
            </section>

 <section class="one-third column m-lorem">
        <p>こでど </p>
 </section>

        <section class="one-third column m-lorem">
        <p>こでど</p>
 </section>

 <section class="sixteen columns m-last-para">
    <p>こでど</p>
 </section>

</div><!-- container -->

jQuery：

   <section class="banner"></section>

<div class="container">
    <header class="sixteen columns l-main-head">
        <h1>シアトル</h1>
    </header>

    <nav class="sixteen columns m-btn-artCont">
        <button class="m-btn-mainArt">学ぶ</button>
    </nav>


    <section class="one-third column m-lorem">
    <p>こでど</p>
            </section>

 <section class="one-third column m-lorem">
        <p>こでど </p>
 </section>

        <section class="one-third column m-lorem">
        <p>こでど</p>
 </section>

 <section class="sixteen columns m-last-para">
    <p>こでど</p>
 </section>

</div><!-- container -->

$（文档）.ready（函数（）{
$（'.m-lorem p'）.hide（）；
});
$（'button.m-btn-mainArt'）。单击（函数（）{
$（'m-lorem p'）.fadeIn（1000）；
});
$（'button.m-btn-mainArt'）。单击（函数（）{
$（'.banner'）.css（'background'，'url（images/settle day.svg）无重复中心修复'）；
});

确保类

横幅

应用于html的body标记，而不是最顶端的父div

可能会回答此问题。为什么要在同一事件上注册两个单独的处理程序？你能出示你的全部代码吗？你到底面临着什么样的麻烦？哪一个是你的图像的类别？请添加样式。添加了我的代码的其余部分。我希望西雅图日.svg在单击按钮后淡入。此外，关于让背景图像像第一幅图像一样覆盖背景的任何帮助都是有帮助的。谢谢